问题描述
我最近尝试将用JavaScript编写的Webpack配置迁移到TypeScript。不幸的是,我为此付出了很多努力。我已经为webpack编写了一个最小的配置文件,因此缺少某些部分。我的Long
看起来像这样:
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
如何将我的配置封装在模块中?错误原因是什么?
更新
我还按照建议的here尝试了以下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
不幸的是,发生相同的错误。
解决方法
将typescript
软件包添加到package.json
可以解决此问题。