webpack的js兼容性處理
轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack的js兼容性處理
js兼容性檢查主要用到的
loader有
babel-loader@8.3.0
@babel/core@7.14.6
@babel/preset-env@7.14.7基本語法兼容性處理
@babel/polyfill@7.12.1全部js兼容性處理，缺點是無法按需加載兼容函數，而是全量加載，打包的 js 文件很大，
core-js@3.32.1全部js兼容性處理，可以按需加載兼容函數
兼容性處理的原理是打包后的 js 文件中會將不兼容的 js 函數、格式、命名規則等轉換為可以多瀏覽器兼容的 js 代碼。
一、最終配置示例
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起點文件
entry: './src/js/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'js/built.js',
// 輸出路徑
// __dirname nodejs的變量,代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
/*
js兼容性處理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性處理 @babel/preset-env
問題：只能轉換基本語法，如promise不能轉換
2．全部js兼容性處理 --> @babel/polvfill
問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
3. 需要做兼容性處理的就做：按需加載 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
"presets": [
[
"@babel/preset-env",
{
// 按需加載
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪個版本的瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
],
},
// plugins的配置
plugins: [
// 詳細的plugins配置
// html-webpack-plugin
// 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
// 需求:需要有結構的HTML文件
new HtmlWebpackPlugin({
// 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html',
}),
],
// 模式 development 開發環境，production 生產環境
mode: 'development',
// 生產環境下會自動壓縮js代碼
// mode: 'production'
};
三、全部js兼容性處理，全量加載兼容函數時的 index.js 文件和webpack配置
/*
使用全量加載兼容函數的形式時的index.js
路徑： ./js/index.js
*/
// 全量加載無需修改 webpack的配置文件，
// 僅需要在入口 index.js 中引入 '@babel/polyfill'，并安裝@babel/preset-env 包
import '@babel/polyfill'
const add = (x, y) => {
return x + y;
}
console.log(add(2, 3));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定時器被執行……')
resolve();
}, 1000)
})
console.log(promise);
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
……
module.exports = {
……
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
/*
js兼容性處理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性處理 @babel/preset-env
問題：只能轉換基本語法，如promise不能轉換
2．全部js兼容性處理 --> @babel/polvfill
問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
"presets": [ "@babel/preset-env", ]
}
},
],
},
// plugins的配置
plugins: [
……
],
// 模式 development 開發環境，production 生產環境
mode: 'development',
// 生產環境下會自動壓縮js代碼
// mode: 'production'
};
四、全部js兼容性處理，按需加載兼容函數時的 index.js 文件和webpack配置
/*
使用按需加載兼容函數的形式時的index.js
路徑： ./js/index.js
*/
const add = (x, y) => {
return x + y;
}
console.log(add(2, 3));
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('定時器被執行……')
resolve();
}, 1000)
})
console.log(promise);
/*
webpack.config.js webpack的配置文件
路徑： ./webpack.config.js
*/
……
module.exports = {
……
// loader的配置
module: {
rules: [
// 詳細loader配置
//不同文件必須配置不同loader處理
/*
js兼容性處理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性處理 @babel/preset-env
問題：只能轉換基本語法，如promise不能轉換
2．全部js兼容性處理 --> @babel/polvfill
問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
3. 需要做兼容性處理的就做：按需加載 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定檢查的目錄，或者配置排除某些文件夾
// include: [path.resolve(__dirname, 'src')],
// 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 預設：指示 babel 做怎么樣的兼容性處理
"presets": [
[
"@babel/preset-env",
{
// 按需加載
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪個版本的瀏覽器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
],
},
// plugins的配置
plugins: [
……
],
// 模式 development 開發環境，production 生產環境
mode: 'development',
// 生產環境下會自動壓縮js代碼
// mode: 'production'
};
五、安裝需要loader
# 安裝需要的loader
> npm i babel-loader@8.3.0 @babel/core@7.14.6 @babel/preset-env@7.14.7 core-js@3.32.1 -D
六、運行
> npx webpack
浙公網安備 33010602011771號