JS模塊化-ES6的模塊化

本文轉載自查看原文 2019-03-14 22:59 1161 JavaScript

使用ES6實現模塊化：

　　（1）創建自己的模塊，導出模塊代碼；

　　（2）導入自己的模塊

問題：多數平台或瀏覽器還不支持ES6的模塊

解決：（1）babel-node；（2）es6轉es5；（3）讓瀏覽器支持es6modules（瀏覽器的隱藏模式）

已知三個子模塊和一個主模塊的關系如下：

四個js文件：

utils.js

products.js (依賴於utils.js)

users.js

main.js

終端輸入：node js/main.js 可能會報錯：

表示不支持import（說明瀏覽器更不可能支持）

nodejs不兼容es6標准的模塊定義語法

解決方法一：babel-node

步驟：

（1）終端輸入：pm -i babel-cli -g

（2）安裝語法插件：npm i babel-preset-es2015 -save

（3）在當前項目的根目錄下新建 .babelrc 文件並配置：

{
  "presets":[
    "es2015"
  ],
  "plugins":[]
}

此時再在終端輸入： babel-node js/main.js 即可正確執行main.js中的代碼

這個方法可以讓第三方工具支持

解決方案二：將ES6轉換成ES5（依然是babel工具）

步驟：

（1）當前項目找到package.json 找到"scripts"項，向里面添加命令：

"build":"babel   js   -d    build --out-dir es5_build"
//意思是將js文件夾下所有的js文件轉換成es5版本，並且保存到es5_build文件夾下

（2）這樣在每次運行新的項目之前，在終端輸入 npm run build 會自動執行package.json下的script指令，會多出一個es5_build文件夾，包含轉換結束后的文件：

此時再直接運行node es5_build/main.js就不會報不支持import的錯誤了：

到這一步，就可以讓服務端接受ES6標准的模塊化語法了。

解決方案三：如何讓瀏覽器端也支持ES6模塊規范

步驟一

安裝工具：

（1）打包工具：

　　　　npm i -g webpack-cli babel-cli

（2）ES2015兩個工具：

　　　　npm i babel-preset-es2015 babel-loader

（3）兼容性包

　　　　npm i --save-dev babel-polyfill

（4）

　　　　npm i -save babel-core

步驟二：

新建webpack.config.js文件並進行配置：

module.exports={ 
  //程序的入口是執行babel-polyfill兼容代碼，把main.js變成兼容代碼
  entry:["babel-polyfill","./js/main.js"],
  // 把js/main.js變成兼容代碼
  output:{
　　 // 輸出路徑及文件名
    path:__dirname+"/dist",
    filename:"main.js"
    // 將編譯打包后的mian.js保存到當前目錄下dist文件夾下的main.js
  },
  module:{
    rules:[{
      test:/.js$/,
      // 使用babel-loader工具將制定目錄下的所有js文件都加載下來
      loader:"babel-loader"
    }]
  }
}