babel的常见配置

一、插件和预设

 {
  presets: [["@babel/preset-env"]],
  plugins: ["@babel/plugin-transform-arrow-functions"]
 }

二、sourcemap的配置

sourceMap

sourceMap: "inline" //  true ｜inline | both | false

• true 开启sourceMap，生成单独的.map文件
• inline 将sourceMap以dataUrl的形式插入到生成的代码中
• both 同时生成.map文件和dataUrl的形式插入到生成的代码中
• false 不生成sourceMap文件

sourceMaps

sourceMap: "inline" //  等同于sourceMap，推荐使用sourceMaps

inputSourceMap

inputSourceMap: true // true | false

手动输入sourceMap,设置为true将在文件中查找dataUrl的sourceMap并应用。

sourceRoot

sourceRoot: 'src'

指定源文件的位置。通常无需设置，会自动解析相对路径。

三、输出配置

targets

  targets: ">0.25%, not dead"

targets:{
  "ie": "11",
  "chrome": "49",
  "firefox": "52",
  "safari": "10.1"  
}

这里的targets可以指定生成的代码所兼容的浏览器的目标版本，还可以通过browserlist来配置，browserslist还可以跨工具使用，如果同时配置了targets和browserslist，则会以targets为准。

browsersListConfigFile

browserslistConfigFile: './config/.browserslistrc'

指定browserslist的配置文件，如果没有配置会按照顺序先后从package.json中的browserslist字段、.browserslistrc文件中读取。

四、配置合并和覆盖

overrides

 {
  "presets":[["@babel/preset-env"]]
  "overridess":[
    {
      "test": "./src/app",
      "presets": [["@babel/preset-react"]]
    },
    {
      "test": "./src/special-dir",
    }
  ]
 }

overrides允许在不同的文件目录中使用不同的babel配置。

env

  "presets":[["@babel/preset-env"]],
  "env":{
    "development":{
      "plugins": ["@babel/plugin-transform-react-jsx-source"]
    },
    "production":{
      "plugins": ["transform-react-remove-prop-types"]
    }
  }

env可以配置不同的环境使用不同的配置

extends

{
  "presets":[["@babel/preset-env"]],
  "extends":"./config/babel.config.js"
}

extends可以集成其他配置文件的配置。

only

{
  "presets":[["@babel/preset-env"]],
  "only": ["src"]
}

only指定只编译哪些目录下的文件

ignore

{
  "presets":[["@babel/preset-env"]],    
  "ignore":["node_modules"]
}

ignore指定忽略哪些目录下的文件

rootMode

{
  "presets":[["@babel/preset-env"]],
  "rootMode": "upward"
}

rootMode指定babel查找根目录的模式，默认是根目录，可以设置为upward，babel会向上查找根目录, 这一点在mono-repo项目中很有用。

exclude/include

{
  "presets":[["@babel/preset-env"]],
  "exclude": ["node_nodules/**"],
  "include":["src/**"]
}

exclude/include可以指定要编译和要排除编译的文件，可以用glob语法。

五、代码生成配置

retainLines

{
  "presets":[["@babel/preset-env"]],
  "retainLines": true
}

retainLines可以保留代码的行号，这样可以保留报错时的行号。

compact

  "presets":[["@babel/preset-env"]],
  "compact": true

生成紧凑的代码， 不包含额外的空格和换行。

minified

  "presets":[["@babel/preset-env"]],
  "minified": true

是否压缩代码

comments

  "presets":[["@babel/preset-env"]],
  "comments": true,

是否保留注释

shouldPrintComment

{
  "presets":[["@babel/preset-env"]],
  “shouldPrintComment”: (comment)=> comment.value.includes("@license")
}

shouldPrintComment可以自定义保留注释的规则。

六、其他配置

sourceType

{
  "presets":[["@babel/preset-env"]],
  "sourceType": "module" // "script" | "module" | "unambiguous"
}

指定代码的类型，默认是script（脚本类型），可以设置为module（es模块），unambiguous会根据代码中是否包含import/export语句自动判断是否为模块类型。

generatorOpts

{
  "presets":[["@babel/preset-env"]],
  "generatorOpts": {
    "retainLines": true,
    "compact": true,
    "minified": true,
    "comments": true,
    "shouldPrintComment": (comment)=> comment.value.includes("@license")
  }
}

generatorOpts可以配置代码生成的相关选项。

parserOpts

{
  "presets":[["@babel/preset-env"]],
  "parserOpts": {
    "sourceType": "module",
    "allowImportExportEverywhere": true,
    "code": true
  }
}

parserOpts可以配置解析器的相关选项。

更多详细的配置灿参考babel官方网站： www.babeljs.cn/docs/option…