本文是我的个人经验总结,如有疏漏,希望你留言指正,感谢~
一、.babelrc
文件 + webpack配置
1. 新建.babelrc
文件,内容如下:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
]
}
2. 设置webpack文件
module.exports = {
module: {
//模块
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
use: [
{
//用 babel-loader 把es6转es5
loader: 'babel-loader'
},
],
exclude: /node_modules/
},
]
}
}
二、纯 webpack配置方案1
module.exports = {
module: {
//模块
rules: [
//规则,多个loader
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
require.resolve('@babel/preset-env'),
{
targets: {
browsers: ['last 2 versions', 'ie 9', 'safari >= 7'],
ios: '8',
android: '5.0'
},
useBuiltIns: 'entry',
corejs: 3,
include: [],
exclude: []
}
],
require.resolve('@babel/preset-react'),
require.resolve('@babel/preset-typescript')
],
plugins: [
require.resolve('@babel/plugin-proposal-optional-chaining'),
require.resolve('@babel/plugin-proposal-class-properties'),
require.resolve('babel-plugin-syntax-dynamic-import'),
[
require.resolve('@babel/plugin-transform-runtime'),
{
corejs: 3
}
]
]
}
},
exclude: /node_modules/
},
]
}
}
经验证,该方法不用.babelrc
文件也可以。而且需要编译ts文件的情况下,不添加ts-loader
也可用。
三、纯 webpack配置方案2
module.exports = {
module: {
//模块
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
use: [
{
//用 babel-loader 把es6转es5
loader: 'babel-loader'
},
'ts-loader'
],
exclude: /node_modules/
},
]
}
}
经验证,该方法不用.babelrc
文件也可以。
该方案与上面一种方案等同。需要编译ts文件的情况下,需要添加ts-loader
。
暂无评论