今天介紹 怎麼編譯 的各種函數和語法。敲黑板: 這是 版本哦, 有一些不同於 的地方。 " 本節課源碼" " 所有課程源碼" 1. 瞭解 說起編譯 ,就必須提一下 和相關的技術生態: 1. : 負責 es6 語法轉化 2. : 包含 es6、7 等版本的語法轉化規則 3. : es6 內置方法和函數 ...
今天介紹
webpack
怎麼編譯ES6
的各種函數和語法。敲黑板:這是webpack4
版本哦, 有一些不同於webpack3
的地方。
1. 瞭解babel
說起編譯es6
,就必須提一下babel
和相關的技術生態:
babel-loader
: 負責 es6 語法轉化babel-preset-env
: 包含 es6、7 等版本的語法轉化規則babel-polyfill
: es6 內置方法和函數轉化墊片babel-plugin-transform-runtime
: 避免 polyfill 污染全局變數
需要註意的是, babel-loader
和babel-polyfill
。前者負責語法轉化,比如:箭頭函數;後者負責內置方法和函數,比如:new Set()
。
2. 安裝相關庫
這次,我們的package.json
文件配置如下:
{
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"webpack": "^4.15.1"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0"
}
}
3. webpack
中使用babel
babel
的相關配置,推薦單獨寫在.babelrc
文件中。下麵,我給出這次的相關配置:
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["transform-runtime"]
}
在webpack
配置文件中,關於babel
的調用需要寫在module
模塊中。對於相關的匹配規則,除了匹配js
結尾的文件,還應該去除node_module/
文件夾下的第三庫的文件(發佈前已經被處理好了)。
module.exports = {
entry: {
app: "./app.js"
},
output: {
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}
]
}
};
4. 最後:babel-polyfill
我們發現整個過程中並沒有使用babel-polyfill
。它需要在我們項目的入口文件中被引入,或者在webpack.config.js
中配置。這裡我們採用第一種方法編寫app.js
:
import "babel-polyfill";
let func = () => {};
const NUM = 45;
let arr = [1, 2, 4];
let arrB = arr.map(item => item * 2);
console.log(arrB.includes(8));
console.log("new Set(arrB) is ", new Set(arrB));
命令行中進行打包,然後編寫html
文件引用打包後的文件即可在不支持es6
規範的老瀏覽器中看到效果了。
5. 相關資料
- polyfill 引入:https://www.babeljs.cn/docs/usage/polyfill/
- babel-preset-env 配置:https://www.babeljs.cn/docs/plugins/preset-env/
歡迎技術交流,引用請註明出處。
個人網站:Yuan Xin
原文鏈接:webpack4 系列教程(二): 編譯 ES6