전단 및 모 바 일 개발 - es6 모듈 화 - es6 모듈 화

ES6 모듈 화
모듈 화 란 무엇 인가
대상:. js 파일 (A. js) 에서 다른. js 파일 (B. js) 의 코드 를 참조 할 수 있 도록 합 니 다.
모듈: 파일 입 니 다.
모듈 화 된 규범:

comonjs 규범.nodejs 는 comonjs 규범 입 니 다.

es6 규범.ECMAScript 규범.

nodejs 에서 모듈 화 규범: CommonJS

내 보 내기: module.exports = ' ' exports.xxx = ' '

가 져 오기: const path = require('path')

nodejs 의 모듈 화 는 es6 의 모듈 화 와 다르다.
ES6 모듈 화
ES6 도 모듈 화 규범 을 제공 했다. ES6 모듈

기본 가 져 오기 및 내 보 내기

내 보 내기: export default

가 져 오기: import from 'js '

필요 에 따라 가 져 오고 내 보 내기

내 보 내기:

export const 1 = ' 1'

export const 2 = ' 2'

가 져 오기: import { 1} from 'js '

기본 절차
정의 모듈

. js 파일 을 만 듭 니 다. 그 중에서 변 수 를 쓰 고 함수...

//       

//    es6module/a.js  fn     main.js    ？

const a = 100
function fn(x,y) {
     
    return x + y
}

내 보 내기 모듈

//       

//    es6module/a.js  fn     main.js    ？

// const a = 100
function fn(x,y) {
     
    return x + y
}

//       fn
export {
      fn }

가 져 오기 모듈
main.js

import {
      fn } from './es6module/a.js'
console.log(fn(100,200)) // 300

기본 가 져 오기 및 내 보 내기module-a.js

//   a      
//            ：                    ...
export default {
     
  name: '  A',
  attr: '  '
}

main.js

import obj from './module-a'
console.log(obj) // {name: "  A", attr: "  "}

필요 에 따라 가 져 오기 및 내 보 내기module-b.js

//   B      
export function fn(x,y) {
     
    return x + y
}

export function fn1(x,y,z) {
     
    return x + y +z
}
export const a = 314

다른 표기 법:

function fn(x,y) {
     
    return x + y
}

function fn1(x,y,z) {
     
    return x + y +z
}
const a = 314

export {
      fn, fn1, a}

main.js

//     
import {
     a,b} from './module-b'
console.log(a,b)

전체 가 져 오기

//     （      ）
import * as all from './module-b'
console.log(all) //           （  ）

기본 내 보 내기 와 필요 에 따라 내 보 내기 공존module-c.js

//     
//               

const fn = function(x,y) {
     
    return x + y
}

const a = 100
const fn1 = function(x,y,z) {
     
    return x + y+z
}

//     
export {
     
    a, fn1
}

//     
export default {
     
    fn
}

main.js

//      
import obj, {
     fn1} from './es6module/c.js'

console.log(obj,fn1)

내 보 내기 이름 가 져 오기
하나의 이름 이 a. js 에서 내 보 내 는 것 도 이 이름 입 니 다.
main. js 에서 도 이름 이 중복 되 었 습 니 다. 이 때 이름 을 바 꿔 야 합 니 다.

a. js 에서 내 보 낼 때 이름 바 꾸 기

main. js 에서 가 져 올 때 이름 바 꾸 기

export {
     xxx as    }

import {
     xxx as    }

// tool.js
const fn = function(x,y) {
     
    return x + y
}
//      
export {
     fn as f2}

// index.js
import {
     f2 as f1} from "./tool.js"

만약 부족 하 다 면, 많은 가르침 을 바 랍 니 다. 아직 끝나 지 않 았 습 니 다. 계속 업데이트 하 세 요!다 같이 발전!