babel升级那点事

613 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

前言

最近因为公司项目的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"] 
}