javascript - babel-loader 破坏了 npm 包中的 `this` 变量

Question

我从 awesome-typescript-loader 切换过来至babel-loader我在我们使用的 npm 包中遇到了这个问题 - lodash-inflection .

Uncaught TypeError: this.pluralize is not a function at pluralize (lodash-inflection.js:68)

下面是损坏的(左)和工作的(右)之间的断点。

this lodash-inflection.js 中的变量变成window而不是包期望的实际值，因此包不再工作。

以下是对 webpack.js 的更改

旧

{
  test: /\.tsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader: 'awesome-typescript-loader',
  options: {
    getCustomTransformers: isDev && path.join(__dirname, './webpack.ts-transformers.js')
  }
}

新

{
  test: /\.tsx?$/,
  exclude: /(node_modules|bower_components)/,
  use: [{
    loader: 'babel-loader',
    options: {
      presets: [
        ["@babel/preset-env", { modules: "false" }],
        ["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }],
        "@babel/preset-react",
      ],
      plugins: [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator"
      ],
      env: {
        development: {
          plugins: [
            [
              "styled-components",
              {
                displayName: true
              }
            ]
          ]
        }, production: {
          plugins: [
            [
              "styled-components",
              {
                displayName: false
              }
            ]
          ]
        }
      }
    }
  }],
}

我见过的大多数 babel 选项都是这样的。我还尝试更改 presets 的顺序.

Answer 1

查看lodash-inflection包，似乎有一个open issue尝试导入和使用单独的方法。尝试导入整个包:

import inflection from 'lodash-inflection';
//...
inflection.pluralize(foo, bar);