介紹
ECMAScript 6.0(以下簡稱 ES6)是 JavaScript 語言的下一代标準,已經在2015年6月正式釋出了。它的目标,是使得 JavaScript 語言可以用來編寫複雜的大型應用程式,成為企業級開發語言。
ES6 轉化 ES5 的環境設定
這裡介紹,用 Babel 配合 Webpack,将 ES6 轉化為 ES5 代碼。當然,也可以隻用 Babel 或配合其他工具,詳情見https://babeljs.io/docs/setup#installation
第一步 安裝 Node.js在這裡https://nodejs.org/en/download/下載下傳安裝。
第二步 建立Demo檔案夾
檔案夾命名為 webpack-babel-demo。
第三步 指令行中到Demo檔案夾的位置
打開指令行視窗。 cd 到 webpack-babel-demo 下。
第四步 初始化項目
在指令行輸入: npm init 。按提示輸入項目的資訊。完成後會生成檔案: package.json 。
第五步 安裝依賴
在指令行中輸入下面的内容:
npm install --save-dev babel-loader babel-preset-env webpack babel-core
安裝成功後,package.json後新增如下的内容:
"devDependencies": {"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.0","webpack":"^3.6.0"}
第六步 設定Babel
在 Demo檔案夾下建立檔案 .babelrc 。檔案中輸入以下内容:
{
"presets": ["env"]
}
第七步 配置Webpack
在 Demo檔案夾下建立檔案 webpack.config.js 。檔案中輸入以下内容:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}
其中,entry 的值為源碼的路徑,output.path 為生成的代碼的路徑。
第八步 添加啟動項目的指令
在 package.json 的 scripts 屬性下添加如下内容:
"start": "webpack --config webpack.config.js"
第九步 測試
在 Demo檔案夾下建立檔案 index.js。在 index.js 随便輸入些 ES6 代碼。如
var a = [1, 2, 3]
var b = [2, 3]
var res = [...a, ...b]
在指令行中輸入 npm start。運作結束後,在 Demo 檔案夾的 dist 目錄下會找到檔案 bundle.js。該檔案内容為轉化為 ES5 的代碼。
推薦閱讀
1.J
2.
3.
4.[
5.
6.[第二
7.
8.