Question

我正在尝试用打字稿建立一个非常简单的库。它应该在浏览器或节点上可用。因此与平台无关。

启动node ./dist/bundle.js时出现此错误：

ReferenceError: self is not defined at eval (webpack:///./node_modules/oboe/dist/oboe-browser.js?:2701:10)

我尝试了一个非常简单的配置：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    watch: true,
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

还有ts：

{
  "compilerOptions": {
    "outDir": "./dist",
    "noImplicitAny": false,
    "sourceMap": true,
    "target": "es6",
    "allowJs": true,
    "lib": [
      "es5",
      "es2017"
    ],
    "baseUrl": "src",
    "resolveJsonModule": true,
    "module": "commonjs"
  },
  "exclude": [
    "src/**/*.test.ts"
  ]
}

我不知道该怎么做。

如果我直接使用tsc，则会引发另一个错误。

Answer 1

我认为这是您尝试访问该捆绑软件的方式的问题：node ./dist/bundle.js 默认情况下，Webpack的目标是“网络”环境，但是此行代码是尝试将生成的JavaScript包与节点一起使用。根据{{3}}：

“由于可以同时为服务器和浏览器编写JavaScript，因此webpack提供了多个部署目标，您可以在webpack配置中对其进行设置...每个目标都有各种特定于部署/环境的添加项，可以满足其需求” < / p>

尝试在webpack.config.js中添加节点目标规范：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    watch: true,
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    target: 'node'
};

希望有帮助！

一个非常简单的打字稿项目的Webpack错误

1 个答案: