一、前言
ECMAScript 6(ES6)的發展速度非常之快,但現代瀏覽器對ES6新特性支持度不高,所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現。
Babel是一個廣泛使用的轉碼器,babel可以將ES6代碼完美地轉換為ES5代碼,所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性。
二、安裝
1、創建個文件夾,目錄如下:
2、安裝webpack
額外說明一下:node.js 的包安裝的時候都加上 --save-dev
參數,那么這個參數是干什么的呢?
當你為你的模塊安裝一個依賴模塊時,正常情況下你得先安裝他們(在模塊根目錄下npm install module-name
),然后連同版本號手動將他們添加到模塊配置文件package.json中的依賴里(dependencies
)。
-save
和save-dev
可以省掉你手動修改package.json文件的步驟。npm install module-name -save
自動把模塊和版本號添加到dependencies部分npm install module-name -save-dve
自動把模塊和版本號添加到devdependencies部分
3、 安裝babel 實現 ES6 到 ES5
4、安裝babel-loader
webpack.config.js配置
module.exports = { entry: './module/module1.js', output: { filename: './js/bundle.js' }, module: { //webpack使用loader的方式處理各種各樣的資源 loaders: [{ test: /\.js$/, //處理以.js結尾的文件 exclude: /node_modules/, //處理除了nodde_modules里的js文件 loader: 'babel-loader' //用babel-loader處理 }] } }
module2.js模塊
export default { add: (a, b) => a * b }
module1.js模塊
import module from './module2'
console.log("計算結果為:"+module.add(5, 5))
以上兩個模塊用了es6的語法
執行webpack命令打包
打包后目錄:
編寫index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script src="./js/bundle.js"></script> //引入打包文件 </html>
結果為: