Webpack i TypeScript: Nie można przetłumaczyć modułu 'child_process' w node.dtts

Question

Próbowałem pobrać pakiet internetowy, maszynopis i react.js współpracując ze sobą poprzez awesome-typescript-loader, ale ciągle dostaję błędy.

Używam niesamowite ładowarka maszynopis w wersji 0.3.0-rc.2 i WebPacka 1.8.9

To jest moje 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'] 
    } 
}; 

gdy uruchomię WebPack dev serwer i moi index.ts wygląda następująco:

alert('hello'); 

stwierdza się następujący błąd:

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

To samo, gdy wstawiam ścieżkę odniesienia.

Kiedy próbuję zaimportować React.js poprzez import React = require('react'); stwierdza:

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

skopiowałem plik node.d.ts z repo Ładowarka, nadal nie ma szczęścia.

Ktoś był w stanie uzyskać tę kombinację działa sprawnie? A może powinienem użyć innego narzędzia do pakowania stron internetowych? Naprawdę chciałbym, aby to działało z pakietem sieci Web.

Answer 1

Wszystko tracisz jest kluczowym target: 'node'.

Zapewnia to, że kierowane środowisko to Node.js, a nie przeglądarka, i dlatego będzie ignorować natywne zależności.

Finał 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

Można rozważyć użycie innego webpack TypeScript loader. Wiem, że kilka problemów miało problemy z węzłem. Istnieje również kilka osób, które mogą pomóc.

Nota prawna: Jestem opiekunem strony ts-loader.

Answer 3

Spróbuj utworzyć plik tsconfig.json.

Na przykład, jak używasz awesome-typescript-loader to powinno działać:

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