工程实战-ES6环境配置

最近在学习ES6语法，故有了从零开始搭建ES6环境的想法。下面第一部分是单纯的ES6环境配置，第二部分是基于webpack环境的工程配置

1. 纯ES6环境配置

1.1 packages中的依赖项：

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1"
}

（1）babel-cli: 用于命令行转码

（2）babel-preset-env：将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言

（3）babel-polyfill： babel支持ES6语法部分的编译，对于新增的类还需安装额外的polyfill

（4）babel-preset-stage-0：为了支持async/await，这个是es7的语法

（5）babel-plugin-transform-runtime:在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小

1.2 .babelrc配置

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

presets 中 env 标识：将基于你的实际浏览器及运行环境
其中 modules有以下选项

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

1.3 packages.json文件添加script

"scripts": {
  "compile": "babel src --out-dir dist"
}

compile: babel src --out-dir dist 用于将src文件夹中的文件使用babel编译到dist文件夹

2. ES6在webpack中的配置

2.1 packages中的依赖项

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.11.1"
}

在webpack中的配置，对比上面的 babel-plugin-transform-runtime babel-preset-env babel-polyfill babel-preset-stage-0 四项是没有变化的

（1）babel-core 提供babel转化的核心语法，上面的babel-cli已包涵，由于在webpack中不需要指令，直接引入core即可

（2）babel-loader 将babel转化为webpack能够转化的文件

（3）webpack webpack-dev-server webpack包及服务

2.2 .babelrc配置

与上面相同

2.3 webpack.config.js配置

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.vue', '.json']//后缀名自动补全
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {// 配置如何展示性能提示(false不提示)
    hints: false
  },
  devtool: '#eval-source-map'
}

2.4 packages.json文件添加script

"scripts": {
  "dev": "webpack-dev-server --open --hot"
}

webpack-dev-server 启动服务
--open 自动打开
--hot 启动热更新

2.5 最终工程目录

.
├── dist
├── index.html
├── node_modules
├── package.json
├── src
└── webpack.config.js