Webpack和TypeScript：無法解析node.d.ts中的模塊'child_process'

Question

我試圖通過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 dev服務器時，我的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時import React = require('react'); 它指出：

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一起工作。

Answer 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'] } }; 

Answer 2

您可以考慮使用不同的webpack TypeScript加載程序 。 我知道有一些節點的問題。 還有一些可能有用的入門 套件 。

免責聲明：我是ts-loader的維護者。

Answer 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 }
}