λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive λμμ 48μ₯ λͺ¨λλ₯Ό μ 리νμμ΅λλ€.
λͺ¨λμ΄λ μ ν리μΌμ΄μ μ ꡬμ±νλ κ°λ³μ μμλ‘μ μ¬μ¬μ© κ°λ₯ν μ½λ μ‘°κ°μ λ§νλ€. μΌλ°μ μΌλ‘ λͺ¨λμ κΈ°λ₯μ κΈ°μ€μΌλ‘ νμΌ λ¨μλ‘ λΆλ¦¬νλ€. λͺ¨λμ μμ λ§μ νμΌ μ€μ½ν(λͺ¨λ μ€μ½ν)λ₯Ό κ°μ§ μ μμ΄μΌ νλ€.
νμΌ μ€μ½νλ₯Ό κ°λ λͺ¨λμ λͺ¨λ μμ°μ μΊ‘μν λμ΄ λ€λ₯Έ λͺ¨λμμ μ κ·Όν μ μλ€. λͺ¨λμ μ ν리μΌμ΄μ μ΄λ λ€λ₯Έ λͺ¨λμ μν΄ μ¬μ¬μ© λμ΄μΌ μλ―Έκ° μλ€. λͺ¨λμ 곡κ°κ° νμν μμ°μ νμ νμ¬ λͺ μμ μΌλ‘ μ νμ 곡κ°κ° κ°λ₯νλ€. μ΄λ₯Ό exportλΌ νλ€.
λͺ¨λ μ¬μ©μλ λͺ¨λμ΄ κ³΅κ°(export)ν μμ° μ€ μΌλΆ λλ μ 체λ₯Ό μλ΅ν΄ μμ μ μ€μ½ν λ΄λ‘ λΆλ¬λ€μ¬ μ¬μ¬μ©ν μ μλ€. μ΄λ₯Ό importλΌ νλ€.
λͺ¨λμ κΈ°λ₯λ³λ‘ λΆλ¦¬λμ΄ κ°λ³μ μΈ νμΌλ‘ μμ±λλ€. λ°λΌμ μ¬μ¬μ©μ±μ΄ μ’μμ κ°λ° ν¨μ¨μ±κ³Ό μ μ§λ³΄μμ±μ λμΌ μ μλ€.
μ²μ μλ°μ€ν¬λ¦½νΈλ λͺ¨λ μμ€ν (export, import)λ₯Ό μ§μνμ§ μμλ€. μλ°μ€ν¬λ¦½νΈ νμΌμ μ¬λ¬ κ°μ νμΌλ‘ λΆλ¦¬νμΌ script νκ·Έλ‘ λ‘λν΄λ λΆλ¦¬λ μλ°μ€ν¬λ¦½νΈ νμΌλ€μ κ²°κ΅ νλμ μλ°μ€ν¬λ¦½νΈ νμΌ λ΄μ μλ κ²μ²λΌ λμνλ€.
μ΄λ° μν©μ μ μλ κ²μ΄ CommonJSμ AMDλ€. μλ°μ€ν¬λ¦½νΈ λ°νμ νκ²½μΈ Node.jsλ λͺ¨λ μμ€ν μ μ¬μ€μ νμ€μΈ CommonJSλ₯Ό μ ννλ€. μ¦, Node.jsλ ECMAScript νμ€ μ¬μμ μλμ§λ§ λͺ¨λ μμ€ν μ μ§μνλ€.
IEλ₯Ό μ μΈν λλΆλΆμ λΈλΌμ°μ μμ ES6 λͺ¨λμ μ¬μ©ν μ μλ€.
script νκ·Έμ type="module" μ΄νΈλ¦¬λ·°νΈλ₯Ό μΆκ°νλ©΄ λ‘λλ μλ°μ€ν¬λ¦½νΈ νμΌμ λͺ¨λλ‘μ μ’ μνλ€.
<script type="module" src="app.mjs"></script>
ESMμ λ μμ μΈ λͺ¨λ μ€μ½νλ₯Ό κ°λλ€. mjs νμΌ λ΄μμ varν€μλλ‘ μ μΈν λ³μλ λλ μ μ λ³μκ° μλλ©° window κ°μ²΄μ νλ‘νΌν°λ μλλ€.
// foo.mjs
const x = 'foo'
console.log(x) // foo
// bar.mjs
console.log(x) // ReferenceError: x is not defined
default
ν€μλ μ¬μ© μ var, let, const
ν€μλλ μ¬μ©ν μ μλ€.// app.mjs
// lib.mjs λͺ¨λμ΄ exportν λͺ¨λ μλ³μλ₯Ό lib κ°μ²΄μ νλ‘νΌν°λ‘ λͺ¨μ importνλ€.
import * as lib from './lib.mjs'
console.log(lib.pi) // 3.141592...
Ref
- μ΄μ λͺ¨ μ , βλͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Diveβ, μν€λΆμ€