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

Question

I tried to get webpack, typescript and react.js working together via awesome-typescript-loader , but I constantly get errors.

I am using awesome typescript loader at Version 0.3.0-rc.2 and webpack 1.8.9

This is my 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']
    }
};

When I run the webpack dev server and my index.ts looks like this:

alert('hello');

It states the following error:

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; }'.

Same when I put in the reference path.

When I try to import the React.js via import React = require('react'); it states:

ERROR in ./ui/index.ts
Module build failed: Cannot resolve module 'child_process' in /..../typings/node
    Required in /..../typings/node/node.d.ts

I copied the node.d.ts file from the loader repo, still no luck.

Has anybody been able to get this combination work smoothly? Or should I just use a different web packager? I'd really would like to get it to work with webpack.

Answer 1

All you're missing is a key target: 'node' .

This makes sure that the environment you are targeting is Node.js and not the browser, and will therefore ignore native dependencies.

Final Config:

 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

You could consider using a different webpack TypeScript loader . I know a few had issues with node stuff. There are also a couple starter kits that may help out.

Disclaimer: I'm the maintainer of ts-loader .

Answer 3

Try creating a tsconfig.json file.

For example, as you are using awesome-typescript-loader this should work:

{
  "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 }
}