最近在學習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

總結

以上是生活随笔為你收集整理的工程实战-ES6环境配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。