webpack 4-react-babel 7-antdフレームワークのbabelrcファイル構成の書き方

2925 ワード

babelrcファイル構成書き方webpack 2+babel 6の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   
          ]
        ]
    ],

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"]//       
    ]
  }