使用旧包时未定义 babelHelpers答案

【问题标题】：babelHelpers is not defined when using an old package使用旧包时未定义 babelHelpers
【发布时间】：2021-02-13 20:18:32
【问题描述】：

目前，我正在开发一个 vuetify v1.5 项目。在出现“未定义 babelHelpers”错误的情况下，我的一个依赖包（d3-flextree）不起作用。我发现的内容是：“使用转换运行时而不是外部助手插件”。我的 .babelrc 文件是：

{
  "presets": ["es2015", "stage-2"],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
    
  ],
  "comments": false
}

但是 ./node_module/d3-flextree 中的 .babelrc 是：

{
  "presets": [
    [
      "es2015",
      { "modules": false }
    ]
  ],
  "plugins": ["external-helpers"]
}

我应该覆盖 ./node_module/d3-flextree/.babelrc 吗？如果是，如何？有什么 webpack 技巧吗？

我的 package.json

"dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.5.3",
    "d3": "^5.7.0",
    "d3-flextree": "^2.1.1",
    "d3-flextree-v4": "^1.0.1",
    "font-awesome": "^4.6.3",
    "hchs-vue-charts": "^1.2.8",
    "html-loader": "^1.1.0",
    "html-webpack-externals-plugin": "^3.8.0",
    "html2canvas": "^1.0.0-rc.5",
    "ts-loader": "^7.0.5",
    "vue": "^2.5.11",
    "vue-color": "^2.7.1",
    "vue-grid-layout": "^2.3.8",
    "vue-i18n": "^8.22.1",
    "vue-input-autowidth": "^1.0.10",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.6.11",
    "vue-template-compiler": "^2.5.11",
    "vue2-editor": "^2.10.2",
    "vuedraggable": "^2.23.2",
    "vuetify": "^1.5.24",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "aspnet-webpack": "^2.0.1",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-register": "^6.18.0",
    "bootstrap": "^3.4.1",
    "cross-env": "^3.1.3",
    "css-loader": "^0.26.4",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "jquery": "^2.2.1",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^1.3.1",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "url-loader": "^0.5.7",
    "vue-loader": "^13.6.0",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2"
  }

【问题讨论】：

如果我将 ./node_module/d3-flextree/.babelrc 更改为手动使用“transform-runtime”，问题就会消失。在 CI 管道的情况下，我不能使用这个技巧

标签： javascript vue.js d3.js webpack babeljs

【解决方案1】：

我发现了一个窍门。有一个CDN file for 'd3-flextree'。只需将其复制到项目中的一个文件中，然后替换原来的 npm 包即可。

- import * as d3flex from "d3-flextree"
+ import * as d3flex from "../statics/scripts/d3-flextree.min"

【讨论】：