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 解析符号链接文件夹中的依赖项

无法解析 Typescript 模块

Webpack 生产构建失败:“无法解析 'aws-sdk'”

使用 Webpack 2 和 awesome-typescript-loader 的 baseUrl 和路径解析

无法解析 webpack 中的“tslint-loader”