preface

There’s nothing to talk about. Just do it.

First use the official upgrade plug-in to upgrade the package

The official provides a very convenient plug-in to see the code directly

Install NPM I -g babel-upgrade Run the command NPX babel-upgrade --write --install to log output"devDependencies": {+"@babel/core": "^ 7.0.0." ",
+    "@babel/plugin-proposal-class-properties": "^ 7.0.0." ",
+    "@babel/plugin-proposal-json-strings": "^ 7.0.0." ",
+    "@babel/plugin-syntax-dynamic-import": "^ 7.0.0." ",
+    "@babel/plugin-syntax-import-meta": "^ 7.0.0." ",
+    "@babel/plugin-transform-runtime": "^ 7.0.0." ",
+    "@babel/polyfill": "^ 7.0.0." ",
+    "@babel/preset-env": "^ 7.5.5." ",
+    "@babel/runtime-corejs2": "^ 7.0.0." ",
-    "babel-core": "^ 6.26.0",
-    "babel-loader": "^ 7.1.2." ",
+    "babel-loader": "^ 8.0.0." "."babel-plugin-component": "^ 1.1.1"// This does not change -"babel-plugin-syntax-dynamic-import": "^ 6.18.0",
-    "babel-plugin-transform-runtime": "^ 6.23.0",
-    "babel-polyfill": "^ 6.26.0",
-    "babel-preset-env": "^ 1.6.1." ",
-    "babel-preset-latest": "^ 6.0.0",
-    "babel-preset-stage-3": "^ 6.24.1",
-    "babel-runtime": "^ 6.26.0"
}
Copy the code

After the completion of the operation found more than three plug-ins, I will not explain the direct look at the official website of the example is very clear

@babel/plugin-proposal-class-properties react

@babel/plugin-proposal-json-strings

@babel/plugin-syntax-import-meta

Plugins configuration mode

Running the above command will automatically modify your configuration file but some of it is unnecessary and there are some errors

Such as:

Error: .plugins[2][1] must be an object, false, or undefined

Solution -Plugin Options

Plugins [2][1] have errors in the plugins[2][]"plugins": [
        "@babel/plugin-syntax-dynamic-import"["@babel/plugin-transform-runtime",
            {
                "corejs": 2}], ["component", - [{"libraryName": "mint-ui"."style": true} -]],"@babel/plugin-syntax-import-meta"."@babel/plugin-proposal-class-properties"."@babel/plugin-proposal-json-strings"
    ]


Copy the code

Browser and polyfill

Invalid Option: ‘borwsers’ is not a valid target

Maybe you meant to use ‘browsers’?

Browserslist – Integration

usebuiltins

Modified.babelrc"presets": [["@babel/preset-env"- {-"targets": {-"borwsers": [-"last 2 version",
-                        "safari >= 7"-] -} -}]], and add parameters"presets":[
    [
        "@babel/preset-env",
        {
            "corejs": 2,// You need to specify that the corejs version document is not written. Do not use 3"useBuiltIns": "usage"// polyfill on demand}]]Copy the code

Plugins plugin-transform-Runtime problems

You should also be sure that the version You pass to the 'corejs' option matches the version specifiedin 
your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

Copy the code

npm install –save core-js@2

Plugin-transform-runtime contains corejs

"plugins": [["@babel/plugin-transform-runtime",
            {
                "corejs": 2 // Be sure to install core-js@2v version not 3}]]Copy the code

WARNING export ‘default’

“Import ‘default’ (imported as ‘RongIMLib’) was not found in’./js/ rongimlib-2.1.0.min ‘”

Some plugins are not usedexportMany plugins use:if (typeof define === 'function' && define.amd) {
      define(factory);
    } else if (typeof exports === 'object') {
      module.exports = factory();
    } else{ self.Curve = factory(); } so you need a plug-in to convert es2015 modules to CommonJS. @babel/plugin-transform-modules-commonjs NPM i-d @babel/plugin-transform-modules-commonjs NPM i-d @babel/plugin-transform-modules-commonjs . Babelrc pluginsCopy the code

If you have any other questions, please leave a message

Is there anything wrong with me getting here