小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
前言
最近因为公司项目的babel太老了,升级了一下,特此记录
一、webpack4.x
使用babel7.x 版本
使用:
- babel-loader
- @babel/core
- @babel/preset-env
- @babel/preset-react
- @babel/plugin-proposal-class-properties
- @babel/plugin-transform-runtime
- 等包
安装
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
bable.config.js
module.exports = {
presets: [
["@babel/env", { // babel7的写法,
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"corejs": "2", // 指定编译的corejs版本,否则构建线上环境时会报警告
"useBuiltIns": "usage",
}],
],
plugins:
[
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-object-rest-spread",
"@vue/babel-plugin-transform-vue-jsx",
],
};
\
二、继续使用babel6.x
使用:
- babel-loader@7.1.5
- babel-core babel-preset-env
- babel-preset-react
- babel-plugin-transform-runtime
- 等包
npm install babel-loader@7 babel-core babel-preset-env babel-preset-react babel-plugin-transform-runtime -D
配置:
bable.config.js
{
"presets": ["env", "react"],
"plugins": ["transform-runtime"]
}