Ошибка Webpack для очень простого проекта

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 По умолчанию веб-пакет нацелен на "веб-среду" , но эта строка кода пытается использоватьсгенерированный пакет JavaScript с узлом .В соответствии с документацией :

"Поскольку JavaScript может быть написан как для сервера, так и для браузера, веб-пакет предлагает несколько целей развертывания, которые вы можете установить в своей конфигурации веб-пакета ... каждая цель имеет различныедополнений, связанных с развертыванием / средой, поддержка в соответствии с ее потребностями "

Попробуйте добавить спецификацию цели узла в ваш 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'
};

Надеемся, чтопомогает!