webpack4-react-babel7-antd框架的babelrc文件配置写法

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"]// 比较大的不同
    ]
  }

你可能感兴趣的:(JavaScript)