用法 ES6(Babel) 模組示例

Created: November-22, 2018

2016 年 7 月在 MDN 上寫的：

此功能目前未在本地任何瀏覽器中實現。它在許多轉換器中實現，例如 Traceur Compiler，Babel 或 Rollup。

所以這裡是 Webpack 的 Babel loader 的例子：

建立資料夾。在那裡新增 package.json 檔案：

{
  "devDependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "webpack": "^1.13.1"
  }
}

在命令列中開啟資料夾。跑：

npm install。

建立 2 個檔案：

cats.js ：

export var cats = ['dave', 'henry', 'martha'];

app.js ：

import {cats} from "./cats.js";
console.log(cats);

為正確使用 babel-loader，應新增 webpack.config.js 檔案：

 module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel?presets[]=es2015'
    }
  ]
}

在命令列中執行：

webpack ./app.js app.bundle.js

現在在資料夾中將檔案：app.bundle.js。

建立 index.html 檔案：

<html>
    <body>
        <script src='app.bundle.js' type="text/javascript"></script>
    </body>
</html>

在瀏覽器中開啟它並在控制檯中檢視結果：

[‘dave’，‘henry’，‘martha’]