node.js - Webpack 和 TypeScript：无法在 node.d.ts 中解析模块 'child_process'

我尝试通过 awesome-typescript-loader 让 webpack、typescript 和 react.js 一起工作，但我不断遇到错误。

我正在使用版本为 0.3.0-rc.2 的 awesome typescript loader 和 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 仓库复制了 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 加载器。我知道有几个人在使用 node 的东西时遇到过问题。也有几个入门工具包可能会有所帮助。

免责声明：我是 ts-loader 的维护者。