gulp-webpack无法解析节点模块

问题描述：

在这里构建一个现代化的Angular应用程序。gulp-webpack无法解析节点模块

我正在使用gulp-webpack进行快速开发构建。我需要webpack来打印我的打字稿，因为我显然依赖于一些节点模块。但是奇怪的是，gulp-webpack似乎没有自动解析导入到我的node_modules目录！因此，它会抛出大约一百万个打字错误，说它找不到这些模块，而我的软件包没有，例如，角度。

这里是我的（略）gulpfile：

var gulp = require('gulp') 
var path = require('path'); 
// var concat = require('gulp-concat') 
var expect = require('gulp-expect-file') 
var plumber = require('gulp-plumber') 
var sourcemaps = require('gulp-sourcemaps') 
// var uglify = require('gulp-uglify') 

var webpack = require('gulp-webpack') 
var sass = require('gulp-sass') 
var nodemon = require('gulp-nodemon') 
var ts = require('gulp-typescript') 
var del = require('del') 
var rename = require('gulp-rename') 
var inject = require('gulp-inject-string') 
// Client-side javascript to single js file 
gulp.task('js', function() 
{ 
    gulp.safeSrc('src/app/main.ts') 
     .pipe(sourcemaps.init()) 
     .pipe(webpack({ 
     context: __dirname, 
     entry: ['./src/app/main'], 
     resolve: { 
      modulesDirectories: ["./node_modules"], 
      extensions: ['.ts', '.js'] 
     }, 
     resolveLoader: { 
      root: path.resolve(__dirname, 'node_modules') 
     }, 
     output: { 
      filename: "bundle.js" 
     }, 
     module: { 
      loaders: [ 
       { 
       test: /\.js$/, 
       loader: 'babel-loader' 
       }, 
       { 
       test: /\.ts$/, 
       loader: 'ts-loader' 
       } 
      ], 
     }, 
    })) 
     .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('public')) 
})

，这里是我的app.component.ts - 我开始收到错误与import 'zone.js'

ERROR in ./src/app/app.component.ts Module not found: Error: Cannot resolve module 'zone.js' in C:\appdir\src\app @ ./src/app/app.component.ts 12:0-18

import 'zone.js'; 
import 'reflect-metadata'; 
import { Component } from '@angular/core'; 

import { Observable } from 'rxjs/Rx'; 
import { Store } from '@ngrx/store'; 
import { AppStore } from '../models/application-store'; 
import { AuthSvc } from './auth/auth.svc'; 

import { Action } from './actions' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="app"> 
    <main-header> 
    </main-header> 
    <router-outlet></router-outlet> 
    </div>` 

}) 

export class AppComponent { 
    error: any; 
    showNgFor = false; 
    constructor() 
    { 

    } 
}

马上发生了什么事？

答

gulp-webpack是一个绝对古老的NPM包。

这里的解决方案是使用webpack-stream，它是webpack 3.0的最新版本

gulp-webpack无法解析节点模块

相关推荐