es5直接引入html文件,ES6+转ES5（webpack+babel、指定多个js文件、自动注入）
接續(xù)上篇ES6+轉(zhuǎn)ES5，本篇將使用webpack和babel將多個不同目錄下指定的多個ES6+語法的js文件編譯為ES5，并將編譯后的文件配置注入對應(yīng)的html文件。
一、新建項目，目錄如下
二、執(zhí)行命令初始化項目
cnpm init -y
執(zhí)行成功后會生成文件：package.json
三、執(zhí)行命令安裝webpack
cnpm install webpack --save-dev
(有個坑)在webpack3中，webpack本身和它的CLI以前都是在同一個包中，但在第4版中，兩者已分開管理，所以要單獨安裝其腳手架。
執(zhí)行命令安裝webpack-cli
cnpm install webpack-cli --save-dev
四、執(zhí)行命令安裝以下3個用于處理js的包
cnpm install --save-dev babel-loader @babel/core @babel/preset-env
babel-loader：對使用了ES2015+語法的.js文件進行處理。
babel-core：提供一系列api。當(dāng)webpack使用babel-loader處理文件時，babel-loader就調(diào)用了babel-core的api。
babel-preset-env：告訴babel使用哪種轉(zhuǎn)碼規(guī)則進行文件處理。babel有幾種規(guī)則都可以實現(xiàn)對ES6語法的轉(zhuǎn)碼，如babel-preset-es2015、babel-preset-latest、babel-preset-env，不過官方現(xiàn)已建議采用babel-preset-env。
五、執(zhí)行命令安裝全局墊片插件：
cnpm install babel-polyfill --save-dev
六、執(zhí)行命令安裝局部墊片插件：
cnpm install @babel/runtime --save-dev
cnpm install @babel/plugin-transform-runtime --save-dev
墊片：Babel默認(rèn)只轉(zhuǎn)換新的JavaScript句法(syntax)，而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法(比如Object.assign)都不會轉(zhuǎn)碼。舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉(zhuǎn)碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當(dāng)前環(huán)境提供一個墊片。
七、根目錄下新建文件：webpack.config.js
這個js配置文件的注意事項我都寫上了注釋，后面我會將其全部內(nèi)容貼上來。
八、根目錄下建一個.babelrc文件，內(nèi)容為
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
],
"plugins": ["@babel/transform-runtime"]
}
意思是打包后的代碼要支持1%以上的瀏覽器并支持瀏覽器的上2個版本
此時執(zhí)行命令webpack就可以了
九、想要配置為html文件自動注入所以生成的包還需要安裝以下插件
執(zhí)行命令安裝html-webpack-plugin插件
cnpm install html-webpack-plugin --save-dev
安裝完成后執(zhí)行webpack即可
注意：如果webpack打包時報錯Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解決辦法
執(zhí)行命令cnpm link webpack --save-dev
然后在執(zhí)行webpack就可以了
附上最后生成文件后的目錄結(jié)構(gòu)圖：
附上webpack.config.js全部內(nèi)容
//為了使用插件，需要將require()其添加到plugins陣列中。使用new運算符調(diào)用插件來創(chuàng)建插件的實例。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
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結(jié)尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理
options: {
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
]
}
}
}]
},
//html-webpack-plugin生成器通過自動注入所有生成的包為應(yīng)用程序生成HTML文件
plugins: [
new HtmlWebpackPlugin({ // 地址為output對應(yīng)的path地址dist
template: './src/index.html', //處理模板
filename: '../index.html' //生成模板
// 無chunks參數(shù)默認(rèn)全部注入
}), new HtmlWebpackPlugin({
template: './src/a.html', //處理模板
filename: '../views/view1.html', //生成模板
chunks: ['index'] // 只引入index.js
})
]
}
共勉，望鞭策！
關(guān)于找一找教程網(wǎng)
本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。
本站提供了軟件編程、網(wǎng)站開發(fā)技術(shù)、服務(wù)器運維、人工智能等等IT技術(shù)文章，希望廣大程序員努力學(xué)習(xí)，讓我們用科技改變世界。
[ES6+轉(zhuǎn)ES5(webpack+babel、指定多個js文件、自動注入)]http://www.zyiz.net/tech/detail-97333.html
總結(jié)
以上是生活随笔為你收集整理的es5直接引入html文件,ES6+转ES5（webpack+babel、指定多个js文件、自动注入）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华南理工网络计算机基础知识,2019年华
- 下一篇： 深圳敏捷云计算机科技,敏捷云 | 关于我