ES6模組化 使用export import

2021-10-01 15:21:04 字數 1616 閱讀 2260

node.js 中通過 babel 體驗 es6 模組化

es6 模組化的基本語法

1. 預設匯出 與 預設匯入

2. 按需匯出 與 按需匯入

3. 匯出物件 與 通過匯出物件同時按需匯入與一次性匯入

預設匯出


export


default


預設匯入


import m1 from


'./m1.js'


按需匯出


export


let s1 =


10按需匯入


import


from


'./m1.js'


使用匯出物件的方式使按需匯入和預設匯入同時使用


export


匯出物件、實現按需匯入


import


from


'./m1.js'


//輸出匯入結果


匯出物件、實現一次性匯入


import


*as m1 from


'./m1.js'


//輸出匯入結果
1.安裝babel-cli和babel-preset-env
npm install babel-cli  -


dnpm install babel-preset-env -


d
2.使用方式


// 預設匯入


// import m1 from './m1'


// 預設匯入與按需匯入同時存在


//import m1, from './m1.js'


//輸出匯入結果


// console.log(m1);


// console.log(s2);


// 匯出物件、實現按需匯入


//import  from './m1.js'


//輸出匯入結果


// 匯出物件、實現一次性匯入


//import * as m1 from './m1.js'


//輸出匯入結果


//直接匯入並且執行執行模組**


import


'./m2.js'


let a=1;


let b=2;


let c=39;


function


show()


//按需匯出


let s2=


110;


//預設匯出


//  export default


//使用物件的方式使按需匯入和預設匯入同時使用


export
3.啟動

啟用命令由原來的node index.js改為下面的命令

babel-node --presets env index.js
命令比原來的node長了不少，可以在package.json新增scripts語句優化命令

"scripts"


:,
優化後的啟用命令

npm start

es6 的模組化

這個是需要複習下的，否則後面的react vue 就理解不清晰了 我覺得js 很牛，為啥，因為前後端都是js 這樣結合起來，很順暢 而且node 作為後端，搭建輕量級伺服器，很是好用，寫個介面絲毫沒有任何問題 後面的基本三大塊，1，node express koa 2,三大框架，react vue ...

ES6的模組化

模組化的特點 1 模組 自動執行在嚴格模式下,沒有任何辦法跳出嚴格模式 2 在模組的作用域下建立的變數,不會被新增到全域性作用域中 3 如果外部可以讀取模組當中的內容,需要模組的匯出 4 模組頂級作用域的this為undefined 匯出資料 export var color pink export...

es6模組化規範

例子 export let myname laowang import from test.js console.log myname laowang 如果要輸出多個變數可以將這些變數包裝成物件進行模組化輸出 let myname laowang let myage 90 let myfn func...