gulp-webpack не может разрешить модули узлов
Строит современное приложение Angular здесь.
Я использую gulp-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'
ОШИБКА в./src/app/app.component.ts Модуль не найден: Ошибка: Не удается разрешить модуль 'zone.js' в 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 ()
{
}
}
В чем дело?
1 ответ
gulp-webpack - абсолютно древний пакет npm.
Решение здесь заключается в использовании webpack-stream
, которая актуальна с webpack 3.0