Webpack und Typoskript: Kann nicht Modul ‚child_process‘ in node.d.ts

Question

Ich versuchte webpack zu bekommen, Typoskript und react.js arbeiten zusammen über awesome-typescript-loader lösen, aber ich ständig Fehlermeldungen erhalten.

ich genial Typoskript loader bin mit der Version 0.3.0-rc.2 und webpack 1.8.9

Das ist mein 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'] 
    } 
}; 

Wenn ich laufen die webpack dev Server und meine index.ts sieht wie folgt aus:

alert('hello'); 

Darin heißt es den folgenden Fehler:

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

Gleich, wenn ich den Referenzpfad einfüge.

Wenn ich versuche, die React.js über import React = require('react'); zu importieren heißt es:

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

ich die node.d.ts Datei aus dem Lader Repo kopiert noch kein Glück.

Hat jemand in der Lage gewesen reibungslos diese Kombination Arbeit zu bekommen? Oder sollte ich einfach einen anderen Webpacker verwenden? Ich würde wirklich gerne mit webpack arbeiten.

Answer 1

Alles, was Sie fehlt, ist ein Schlüssel target: 'node'.

Dies stellt sicher, dass die Umgebung, die Sie zielen Node.js und nicht der Browser, und wird daher nativen Abhängigkeiten ignorieren.

Finale 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

könnten Sie betrachten eine andere webpack TypeScript loader verwenden. Ich weiß, dass ein paar Probleme mit Knoten haben. Es gibt auch ein paar starterkits, die helfen können.

Disclaimer: Ich bin der Maintainer von ts-loader.

Answer 3

Versuchen Sie, eine tsconfig.json-Datei erstellen.

Zum Beispiel, wie Sie awesome-typescript-loader verwenden dies sollte funktionieren:

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