天天看點

es6轉化es5普通html頁面,ES6轉化ES5的環境設定(Babel + Webpack)

介紹

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.