Question

我在gulp，webpack（stream）示例中遇到疏松时遇到了一个问题，在这里我遇到了这个奇怪的错误：

node_modules\webpack-stream\node_modules\webpack\lib\ProgressPlugin.js:12

const defaultHandler = (percentage, msg, ...args) => {
                                             ^^^
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\code\node_modules\webpack-stream\index.js:10:22)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)

我的项目根目录中有一个基本的gulpfile，其代码如下：

const gulp = require("gulp");
const ts = require("gulp-typescript");
const concat = require("gulp-concat"); 
const named = require("vinyl-named");
const webpack = require("webpack-stream");

var fmProject = ts.createProject("scripts/fortress/typescript/filemanager/tsconfig.json");


gulp.task("filemanager:watch", function() {
    return fmProject.src()
        .pipe(named())
        .pipe(webpack(require("./webpack.config.js")))
        .pipe(fmProject())
        .pipe(gulp.dest("scripts/fortress/react-components/transpiled-components/filemanager/"));
});

tsconfig文件可以在单独的任务（不使用webpack或乙烯基）中正常工作。

我希望这个gulp文件能够挂接到tsconfig文件，并使用乙烯基模块将一些.tsx（打字稿反应）代码转换成.js代码。这是因为我想为单独的React组件（不是我所有文件的一大捆）承担单独的任务。

我的webpack.config.js文件：

module.exports = { 

    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

当我删除对任何webpack-stream的引用时，gulpfile可以很好地编译。但是，它无法运行任务...

有人知道我该如何工作吗？

将webpack-stream与gulp一起使用时的奇怪行为

0 个答案: