Babel 6 到 Babel 7
Babel 是個從開發(fā)環(huán)境到生產(chǎn)環(huán)境的中間環(huán)境辽故,提供大而全的插件和預(yù)設(shè)配置串前,由開源社區(qū)維護(hù)氧枣,可以配合各種構(gòu)建工具项滑,例如 webpack parcel gulp grunt 之類的,讓前端不局限于前端茧球。如果還沒開始使用那要趕緊嘗試庭瑰。
Babel 6 的配置比較簡單,這里不多說了抢埋,主要是講升級到 Babel 7 需要注意的細(xì)節(jié)
Babel 7 庫的作用域 (scope)
Babel 7 用了 npm 的 private scope弹灭,把全部的包都掛在在 @babel 下,類似的有 typescript 的 @type揪垄。
這個改進(jìn)挺好的穷吮,需要查看 node_modules 的時候不再看到一堆 babel-xxx 的包了,都在 @babel/xxx 之下饥努。清爽了不少捡鱼。
Babel 7 提供多種配置
- .babelrc
- babel.config.js
- webpack babel loader
Babel 7 的 .babelrc 的作用范圍
Users coming from Babel 6.x will likely trip up on these two edge cases, which are new in Babel 7.x. These two restrictions were added to address common footguns in Babel 6.x:
babel 7 開始, .babelrc 的作用范圍僅限于當(dāng)前項目,默認(rèn)不再作用與 node_modules 和工作區(qū) (./packages/*)酷愧,如果需要驾诈,可以指定作用范圍
在項目 rootDir 創(chuàng)建 babel.config.js, 寫入以下配置即可
module.exports = (api) => {
api.cache(true);
// https://babeljs.io/docs/en/next/config-files#project-wide-configuration
return {
"babelrcRoots": [
".",
"./packages/*"
]
};
};
這樣可以作用于更多的指定環(huán)境之中,更靈活使用伟墙,性能更高
參考