react項目配置babel7

babel7 React項目配置

很少說，先上babelrc配置

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "66"
        },
        "corejs": {
          "version": 2
        },
        "useBuiltIns": "usage",
        "modules": "commonjs"
      }
    ],
    "@babel/react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": true}],
    "add-module-exports",
    ["import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

總結

• babel7的包都是以 @babel開頭的，全部的模塊插件啥的都是在node_modules/@babel/目錄下
• babel中真正幹活的是插件，插件的做用是transform
• preset（預置），就是一個插件包的集合，你也能夠本身寫插件包,插件包不夠用，再配置plugins唄
• 配置了babel7,確定要用新版本的babel-loader,老版本的babel-loader會找 babel-core而不是@babel/core會報錯
• babel7新增了babel.config.js配置文件，是項目級別的配置，建議使用， .babelrc配置仍然能夠用，至於爲啥，memorepo能夠了解一下
• babel7廢棄了babel-preset-stage-0這樣的配置，若是不懂stage-0啥的，自行學習，若是要用，須要直接引入cores-js的相關模塊
• @babel-preset-env 這樣的preset可簡寫，如上
• polyfill墊片，就是web開發中，可移植的代碼補充庫
• 關於babel-polyfill其實就是core-js 和 一個工具庫
• core-js是實現了一些如今沒支持的新功能的庫，分2和3兩個大版本
• babel6以後，對export default 這樣的 es 模塊寫法不支持，須要一個 babel-plugin-add-module-exports的庫支持
• 要支持裝飾器的寫法，須要@babel/plugin-proposal-decorators 插件支持，配置如上
• babel-plugin-import 是配置antd按需加載的一個插件，作React項目，幾乎antd是必備的吧