Webpack實現es6轉換為es5
安裝插件
npm install --save-dev babel-loader @babel/core @babel/preset-env
配置
在webpack.config.js
中的module的rules中,添加一條新的loader
{
test: /\.js/, //babel轉化es6到es5
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: 2
}
]
]
}
}
}
-
目前就已經可以了
-
缺點,會他會對於window的變量造成一些污染,那么我們就可以使用第二種方式
第二種方式
安裝
npm install --save-dev babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime
使用
在webpack.config.js
中的module的rules中添加一條如下規則
{
test: /\.js/, //babel轉化es6到es5
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
// presets: [
// [
// "@babel/preset-env",
// {
// useBuiltIns: "usage",
// corejs: 2
// }
// ]
// ],
plugins: ["@babel/plugin-transform-runtime"]
}
}
}
這種方式也有對應的缺點,對於原型鏈上的方法不會進行轉義,所以如果你要寫一些公開庫,推薦使用這種,如果自己平常開發,很少會碰到原型鏈,那么就是用@babel/preset-env