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)

下面是損壞的（左）和工作的（右）之間的斷點。

lodash-inflection.js的this變量成為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包，似乎嘗試導入和使用單個方法存在一個未解決的問題。 嘗試導入整個包：

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