用 TypeScript 编写的 Webpack 配置会引发导入错误

Question

我最近尝试将用 JavaScript 编写的 Webpack 配置迁移到 TypeScript。不幸的是我对此很挣扎。我已经为 webpack 编写了一个最小的配置文件来启动，因此缺少一些部分。我的webpack.config.ts看起来像这样：

import webpack from "webpack";

const config: webpack.Configuration = {
    entry: {
        bookmarklet: 'bookmarklet.ts'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

export default config;

我有一个tsconfig.json其中包含：

{
    "compilerOptions": {
        "module": "ESNext",
        "target": "ES6",
        "lib": ["ES6", "dom"],
        "strict": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "moduleResolution": "Node",
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": false
    }
}

其中package.json包含：

{
  "name": "bookmarklets",
  "version": "0.0.1",
  "description": "A collection of bookmarklets",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.ts"
  },
  "devDependencies": {
    "@types/node": "^14.10.0",
    "@types/webpack": "^4.41.22",
    "bookmarklet-wrapper-webpack-plugin": "^1.0.1",
    "ts-node": "^9.0.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

yarn build抛出以下错误时：

yarn run v1.22.5
$ webpack --config webpack.config.ts
/home/codespace/workspace/zli-bookmarklets/webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import webpack from "webpack";
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:88:7)
    at NativeCompileCache._moduleCompile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:242:18)
    at Module._compile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/home/codespace/workspace/zli-bookmarklets/node_modules/yargs/yargs.js:576:18)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

如何将我的配置封装在模块中？错误的原因是什么？

更新

我还按照此处的tsconfig.json建议尝试了以下操作：

{
    "compilerOptions": {
        "module": "CommonJS",
        "target": "ES5",
        "esModuleInterop": true,
    }
}

不幸的是，同样的错误发生了。

Answer 1

我已经解决了

{
    "compilerOptions": {...},
    "ts-node": {
        "compilerOptions": {
        "module": "CommonJS"
     }
  }
}