时间戳

首页 > 解决方案 > 一个非常简单的打字稿项目的Webpack错误

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

问题描述

我正在尝试在 typescript 中构建一个非常简单的库。它应该可以在浏览器或节点上使用。所以平台无关。

启动时出现此错误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 ，它会引发另一个错误。

标签： typescriptwebpack

解决方案

我相信这是您尝试访问捆绑包的方式的问题：node ./dist/bundle.js 默认情况下，webpack 以“web”环境为目标，但是这行代码正在尝试将生成的 JavaScript 捆绑包与 node 一起使用。根据文档：

“因为可以为服务器和浏览器编写 JavaScript，所以 webpack 提供了多个部署目标，您可以在 webpack 配置中设置这些目标......每个目标都有各种特定于部署/环境的添加，支持以满足其需求”

尝试在 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'
};

希望这会有所帮助！

推荐阅读