Webpack 和 TypeScript:无法解析 node.d.ts 中的模块“child_process”
Posted
技术标签:
【中文标题】Webpack 和 TypeScript:无法解析 node.d.ts 中的模块“child_process”【英文标题】:Webpack and TypeScript: Cannot resolve module 'child_process' in node.d.ts 【发布时间】:2015-07-12 02:37:06 【问题描述】:我试图通过awesome-typescript-loader 让 webpack、typescript 和 react.js 一起工作,但我经常出错。
我在版本 0.3.0-rc.2 和 webpack 1.8.9 中使用了很棒的打字稿加载器
这是我的 webpack.config.js:
module.exports =
entry: './ui/index.ts',
output:
path: __dirname + '/build-ui',
filename: 'app.js',
publicPath: 'http://localhost:8090/assets'
,
module:
loaders: [
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
,
test: /\.css$/,
loader: "style-loader!css-loader"
,
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
,
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
,
test: /\.ts$/,
loader: 'awesome-typescript-loader'
]
,
resolve:
extensions: ['', '.js', '.jsx', '.ts']
;
当我运行 webpack 开发服务器时,我的 index.ts 看起来像这样:
alert('hello');
它指出以下错误:
ERROR in ./ui/index.ts
/Users/..../typings/node/node.d.ts:29:12
Subsequent variable declarations must have the same type. Variable 'require' must be of type 'WebpackRequire', but here has type ' (id: string): any; resolve(id: string): string; cache: any; extensions: any; main: any; '.
当我输入参考路径时也是如此。
当我尝试通过 import React = require('react');
导入 React.js 时,它指出:
ERROR in ./ui/index.ts
Module build failed: Cannot resolve module 'child_process' in /..../typings/node
Required in /..../typings/node/node.d.ts
我从 loader repo 复制了 node.d.ts 文件,仍然没有运气。
有没有人能够让这种组合顺利进行?还是我应该只使用不同的网络打包程序? 我真的很想让它与 webpack 一起工作。
【问题讨论】:
【参考方案1】:您所缺少的只是一个密钥target: 'node'
。
这可确保您的目标环境是 Node.js 而不是浏览器,因此将忽略本机依赖项。
最终配置:
module.exports =
entry: './ui/index.ts',
target: 'node',
output:
path: __dirname + '/build-ui',
filename: 'app.js',
publicPath: 'http://localhost:8090/assets'
,
module:
loaders: [
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
,
test: /\.css$/,
loader: "style-loader!css-loader"
,
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
,
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
,
test: /\.ts$/,
loader: 'awesome-typescript-loader'
]
,
resolve:
extensions: ['', '.js', '.jsx', '.ts']
;
【讨论】:
【参考方案2】:您可以考虑使用不同的webpack TypeScript loader。我知道有些人遇到了节点问题。还有一对 starter kits 可能会有所帮助。
免责声明:我是ts-loader
的维护者。
【讨论】:
【参考方案3】:尝试创建一个tsconfig.json
文件。
例如,当您使用 awesome-typescript-loader
这应该可以:
"compilerOptions":
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true
,
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions":
"forkChecker": true
,
"compileOnSave": false,
"buildOnSave": false,
"atom": "rewriteTsconfig": false
【讨论】:
以上是关于Webpack 和 TypeScript:无法解析 node.d.ts 中的模块“child_process”的主要内容,如果未能解决你的问题,请参考以下文章
Electron 和 TypeScript:“fs”无法解析
TypeScript+Webpack 解析符号链接文件夹中的依赖项
Webpack 生产构建失败:“无法解析 'aws-sdk'”