[英]How to use babel with webpack for ie11 compatibility
這是我第一次使用 webpack 和 babel,我的目標是讓我的小模板應用程序與 ie11 兼容。
出於某種原因,我忽略了,我的 JS 在 ie11 中根本不起作用,即使我確實將它設置為我的配置中的目標。 為了測試它,我在 inte.net 上使用了 ie11,但由於我在 MacOS 上,所以無法訪問堆棧錯誤。
我在這里錯過了什么?
更多信息的源代碼: https://github.com/VelynnXV/Front-End-Workflow
網址: https://nifty-noether-cafbd5.netlify.app/
應用程序.js
import regeneratorRuntime from "regenerator-runtime";
async function app() {
console.log('App entry point')
const template = document.getElementById('app')
await new Promise(r => setTimeout(() => r(), 2500))
template.innerHTML = `
<div class="web-container">
<div id="">
Async / awat test
</div>
</div>
`
console.log('App finished')
};
app();
webpack.config.json
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: ['core-js/stable', './src/app.js'],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.js',
},
devServer: {
publicPath: "./src/",
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({ // will generate the html file WITH app.js
// see plugin here : https://webpack.js.org/plugins/html-webpack-plugin/
template: './src/index.html',
filename: './index.html'
})
],
module: {
rules: [ // set of rules letting webpack know how to handle .xyz files
{
test: /\.m?js$/, // source: https://webpack.js.org/loaders/babel-loader/
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
}
],
},
};
babel.config.js
// babel.config.js
module.exports = api => {
return {
plugins: [
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-transform-runtime",
],
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs:3,
// caller.target will be the same as the target option from webpack
targets: api.caller(caller => caller && caller.target === "node")
? { node: "current" }
: { chrome: "58", ie: "11" }
}
]
]
}
}
package.json
{
"name": "front-end-workflow",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"scripts": {
"dev": "npm run clean && npm run build && webpack serve",
"build": "webpack",
"clean": "rimraf ./dist"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.17",
"@babel/plugin-transform-runtime": "^7.12.17",
"@babel/preset-env": "^7.12.17",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"html-loader": "^2.1.0",
"html-webpack-plugin": "^5.2.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"@babel/runtime": "^7.6.3",
"core-js": "^3.3.2"
}
}
您幾乎擁有了 IE11 支持的完整配置。 您唯一缺少的是 webpack 配置中的target: "es5"
選項。 Babel 正確地轉譯了你的文件。 Webpack 還注入了所有必要的 polyfill。 但是,您需要在將代碼捆綁在一起時告訴 Webpack 以使用您的目標瀏覽器可以理解的語法。 無論出於何種原因,Webpack 將默認設置為包含箭頭函數的 ES 版本。 IE11 控制台顯示的錯誤( SCRIPT1002:syntax error
)指向捆綁的app.js
文件中第一次出現的箭頭 function。
一個額外的提示:在你的 babel 配置中使用comments: false
來從你的包中刪除代碼注釋。 這可以稍微減小你的包的大小。
您可以git apply
此差異以進行更改。
diff --git a/babel.config.js b/babel.config.js
index 8d2442b..273176c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,7 @@
module.exports = api => {
return {
+ comments: false,
plugins: [
"@babel/plugin-transform-runtime",
],
diff --git a/webpack.config.js b/webpack.config.js
index 2243a11..08af521 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,7 @@ module.exports = {
filename: './index.html'
})
],
+ target: "es5",
module: {
rules: [ // set of rules letting webpack know how to handle .xyz files using loader
// see loaders : https://webpack.js.org/loaders/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.