ES6+轉ES5(webpack+babel、指定多個js檔案、自動注入)
接續上篇ES6+轉ES5,本篇將使用webpack和babel將多個不同目錄下指定的多個ES6+語法的js檔案編譯為ES5,並將編譯後的檔案配置注入對應的html檔案。
所需環境node、npm、設定淘寶映象請參考上篇進行安裝,地址:https://www.cnblogs.com/puyongsong/p/12036090.html
一、新建專案,目錄如下
二、執行命令初始化專案
cnpm init -y
執行成功後會生成檔案:package.json
三、執行命令安裝webpack
cnpm install webpack --save-dev
(有個坑)在webpack3中,webpack本身和它的CLI以前都是在同一個包中,但在第4版中,兩者已分開管理,所以要單獨安裝其腳手架。
cnpm install webpack-cli --save-dev
四、執行命令安裝以下3個用於處理js的包
cnpm install --save-dev babel-loader @babel/core @babel/preset-env
babel-loader:對使用了ES2015+語法的.js檔案進行處理。
babel-core:提供一系列api。當webpack使用babel-loader處理檔案時,babel-loader就呼叫了babel-core的api。
babel-preset-env:告訴babel使用哪種轉碼規則進行檔案處理。babel有幾種規則都可以實現對ES6語法的轉碼,如babel-preset-es2015、babel-preset-latest、babel-preset-env,不過官方現已建議採用babel-preset-env。
五、執行命令安裝全域性墊片外掛:
cnpm install babel-polyfill --save-dev
六、執行命令安裝區域性墊片外掛:
cnpm install @babel/runtime --save-dev
cnpm install @babel/plugin-transform-runtime --save-dev
墊片:Babel預設只轉換新的JavaScript句法(syntax),而不轉換新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全域性物件,以及一些定義在全域性物件上的方法(比如Object.assign)都不會轉碼。舉例來說,ES6在Array物件上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法執行,必須使用babel-polyfill,為當前環境提供一個墊片。
七、根目錄下新建檔案:webpack.config.js
這個js配置檔案的注意事項我都寫上了註釋,後面我會將其全部內容貼上來。
八、根目錄下建一個.babelrc檔案,內容為
{ "presets": [ ["@babel/preset-env", { "targets": { "browsers": ["> 1%", "last 2 versions"] } }] ], "plugins": ["@babel/transform-runtime"] }
意思是打包後的程式碼要支援1%以上的瀏覽器並支援瀏覽器的上2個版本
此時執行命令webpack就可以了
九、想要配置為html檔案自動注入所以生成的包還需要安裝以下外掛
執行命令安裝html-webpack-plugin外掛
cnpm install html-webpack-plugin --save-dev
安裝完成後執行webpack即可
注意:如果webpack打包時報錯Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解決辦法
執行命令cnpm link webpack --save-dev
然後在執行webpack就可以了
附上最後生成檔案後的目錄結構圖:
附上webpack.config.js全部內容
//為了使用外掛,需要將require()其新增到plugins陣列中。使用new運算子呼叫外掛來建立外掛的例項。 const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); // 用於訪問內建外掛 const path = require('path'); module.exports = { entry: { //入口配置 index: './src/index.js', ctrl: './ctrls/ctrl.js' }, // 這裡[]裡的name就是app和search也就是entry裡的key值 // 這裡[hash:5]會隨機生成一個版本號作為你的打包js版本 // 建議最後一次打包才加上.[hash:5] 否則每次打包都同一個檔案都會生成新的版本號不同的檔案 output: { //出口配置 // filename: '[name].[hash:5].js', filename: '[name].js', path: __dirname + '/dist' // 生成新檔案的地址 }, module: { rules: [{ test: /(\.jsx|\.js)$/, // 處理以.jsx或.js結尾的檔案 use: { loader: "babel-loader", // 用babel-loader處理 options: { "presets": [ ["@babel/preset-env", { "targets": { "browsers": ["> 1%", "last 2 versions"] } }] ] } } }] }, //html-webpack-plugin生成器通過自動注入所有生成的包為應用程式生成HTML檔案 plugins: [ new HtmlWebpackPlugin({ // 地址為output對應的path地址dist template: './src/index.html', //處理模板 filename: '../index.html' //生成模板 // 無chunks引數預設全部注入 }), new HtmlWebpackPlugin({ template: './src/a.html', //處理模板 filename: '../views/view1.html', //生成模板 chunks: ['index'] // 只引入index.js }) ] }
共勉,望鞭