用法 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’]