标签: gulp-webpack

有一个测试项目,其结构:

它是文件*.ts:

////// greeter.ts
import {ActionsCollection} from "./actionsCollection";
class Greeter extends ActionsCollection{

}
var greeter = new Greeter();
alert(greeter.greet("Hello, world!"));

////// actionsCollection.ts

export class ActionsCollection{

    public say (){

    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
}

///// newTS.ts

export class NewTS{
    public foo (){
        return "<h1>foo</h1>";
    }
}

这是gulpfile:

var gulp = require('gulp');
var debug = require('gulp-debug');
var webpack = require('gulp-webpack');
gulp.task('default', function() {
    return gulp.src('ts/greeter.ts')
        .pipe(webpack({
            output: {
                filename: 'main.js'
            },
            resolve: {
                extensions: ['', '.webpack.js', '.web.js', '.ts', …

当尝试使用gulp-webpack将jsx / js转换为浏览器级别时，我一直收到此问题。

我已经将NPM和nodeJS更新为当前最新版本（3.8.9和6.1.0）

它输出的错误是：

找不到输入模块中的错误：错误：无法在C：\ xampp \ htdocs \ project \ tools中解析模块'babel'

奇怪的是，它正在正确的文件夹中查找（node_modules文件夹在此目录中），但根本找不到它。

我的文件夹结构分为3个文件夹，分别是

• 应用程式
• src
• 工具

所述应用程序文件夹中包含的浏览器级代码（JS / CSS）

在src文件夹中包含高级语言（SCSS / JSX）

该文件夹工具包含我gulpfile，node_modules，的package.json，bower.json和bower_components

我的gulp任务，用于将jsx / js转换为浏览器级别

gulp.task('react', function() {
return gulp.src('../src/js/react/index.js')
.pipe(webpack({
  entry: 
    {
      app: './../src/js/react/index.js'
    },
  output: {
    path: __dirname + "../app/js/react",
    publicPath: '/',
    filename: 'bundle.js'
  },

  module: {
    loaders: [{
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      cacheDirectory: true,
      query: {
        presets: [
          'babel-preset-es2015',
          'babel-preset-react'
        ].map(require.resolve)
      }
    }]
  },

  resolveLoader: {
        modulesDirectories: [ …