babel6升级为babel7

最新推荐文章于 2025-01-08 12:01:46 发布

原创最新推荐文章于 2025-01-08 12:01:46 发布 · 907 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#babel #vue

javascript 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细记录了一次 Babel 的升级过程，包括从卸载旧版 babel-core 到安装最新版 @babel/core，并使用 babel-upgrade 工具更新配置和依赖。升级后的 .babelrc 和 package.json 文件显示了新引入的插件和预设，如 @babel/preset-env 和一系列 @babel 插件，旨在提升代码的兼容性和现代性。这是一份实用的前端开发工具升级教程。

0、神秘升级代码

npm un babel-core

npm i -D @babel/core

npx babel-upgrade --write --install

1、先看更新前的babel
.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

.package.json

  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
}

2、更新步骤
① 卸载旧babel-core
② 安装最新babel
③ 使用 babel-upgrade （babel-upgrade工具包）更新相关依赖和配置

npm un babel-core

npm i -D @babel/core

npx babel-upgrade --write --install

3、安装上述步骤配置部分已经升级了，接下看有空余时间不妨看看 babel-upgrade 做了什么
① 先看最终 .babelrc 变成了什么

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "transform-vue-jsx",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions"
  ],
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env"
      ],
      "plugins": [
        "transform-vue-jsx",
        "@babel/plugin-transform-modules-commonjs",
        "dynamic-import-node",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"
      ]
    }
  }
}