webpack 4-react-babel 7-antdフレームワークのbabelrcファイル構成の書き方
2925 ワード
babelrcファイル構成書き方webpack 2+babel 6のbabelrcファイル構成
Webpack 4+babel 7のbabelrcファイル構成babel 7は導入方式が変わったため、古い:“env”、新しい:“@babel/preset-env”、自分で比較を観察することができます.重点的に言えば、antdとantd-mobileの導入は、以前とは書き方が異なり、前の配列に複数のオブジェクトを導入することができます.現在、1つの配列は1つしか導入されていません.配列の3番目の要素はnameで書かなければなりません.[“import”, { “libraryName”: “antd”, “libraryDirectory”: “lib”, “style”: “css”}, “ant” ],
"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
]
]
],
Webpack 4+babel 7のbabelrcファイル構成babel 7は導入方式が変わったため、古い:“env”、新しい:“@babel/preset-env”、自分で比較を観察することができます.重点的に言えば、antdとantd-mobileの導入は、以前とは書き方が異なり、前の配列に複数のオブジェクトを導入することができます.現在、1つの配列は1つしか導入されていません.配列の3番目の要素は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"]//
]
}