Typescript + Webpack 库生成“ReferenceError: self is not defined”

Question

我正在构建一个与 Webpack 5.3.2 捆绑在一起的 TS 库。然后我尝试将输出包加载dist/scalextric.js到node.js脚本中：

node -e 'console.dir(Object.keys(require("./dist/scalextric.js")));'

我得到：

ReferenceError: self is not defined
    at Object.<anonymous> (/media/kratib/Data/src/infojunkie/scalextric/dist/scalextric.js:2:215)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at [eval]:1:25
    at Script.runInThisContext (vm.js:132:18)
    at Object.runInThisContext (vm.js:309:38)

我需要帮助修复此错误。这是我的各种配置：

• webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'scalextric.js',
    library: 'Scalextric',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist'),
    umdNamedDefine: true,
  },
};

• tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": ["dom", "esnext.asynciterable"],
    "target": "es6",
    "moduleResolution": "node",
    "outDir": "./dist",
    "sourceMap": true,
    "declaration": true,
    "importHelpers": true
  },
  "include": [
    "src"
  ]
}

• index.ts：

export * from './Tuning';
export * from './TuningNotation';
export * from './Interval';

我犯了什么明显的错误？这是完整的代码。

Answer 1

此问题与此处描述的选项output.globalObject有关。

我相信出于某种原因webpack已将其设置为self。但是为了在浏览器和节点上工作，您可以简单地切换到this：

output: {
  // ...
  globalObject: 'this',
},