babelrc文件配置写法
webpack2+babel6的babelrc文件配置
"presets": [
["env",
{ "modules": false }],
"stage-0",
"stage-2",
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
[
"import", [{
"style": "css",
"libraryName": "antd-mobile"
},// 这里会和babel7有差别
{
"style": "css",
"libraryName": "antd"
}// 这里会和babel7有差别
]
]
],
webpack4+babel7的babelrc文件配置
babel7所以引入方式有改变,旧:“env”,新: “@babel/preset-env”,自己可以观察对比。
着重说一下,antd和antd-mobile的引入,和之前写法不一样,之前一个数组里可以用多个对象引入。
现在一个数组只引入一个,数组里面第三个元素就是name是必须写的。
[“import”,
{ “libraryName”: “antd”, “libraryDirectory”: “lib”, “style”: “css”},
“ant”
],
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
}
],
"@babel/preset-react"
],
"plugins": [
// Stage 0
"@babel/plugin-proposal-function-bind",
// Stage 1
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
["@babel/plugin-proposal-optional-chaining", { loose: false }],
["@babel/plugin-proposal-pipeline-operator", { proposal: "minimal" }],
["@babel/plugin-proposal-nullish-coalescing-operator", { loose: false }],
"@babel/plugin-proposal-do-expressions",
// Stage 2
["@babel/plugin-proposal-decorators", { legacy: true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
// Stage 3
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { loose: false }],
"@babel/plugin-proposal-json-strings",
],
"@babel/transform-runtime",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
"react-hot-loader/babel",
["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css"}, "ant"],//比较大的不同
["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib", "style": "css"}, "antd-mobile"]// 比较大的不同
]
}