npm - 将 browserify 工作流程移动到 gulp 任务 [vueify, browserify, babelify]

Question

我正在尝试将以下 browserify 工作流程迁移到单个 gulp 任务中:

package.json:

"scripts": {
  "build": "browserify src/main.js > dist/build.js"
},
...
"browserify": {
  "transform": [
    "vueify",
    "babelify"
  ]
}

.babelrc 文件:

{
  "presets": ["es2015"]
}

自 gulp-browserify现在不再维护了，我用了this recipe将整个工作流程整合到一个 gulp 任务中:

gulp.task('build', function () {
    var b = browserify({
        entries: './src/main.js',
        debug: true,
        transform: [vueify, babelify.configure({presets: ["es2015"]})]
    });
    return b.bundle()
        .pipe(source('build.js'))
        .pipe(buffer())
        .on('error', gutil.log)
        .pipe(gulp.dest('./dist/'));
    });

不幸的是，生成的 build.js 文件不同，只有命令 npm run build 生成的 build.js 文件才能正常运行我的 Vue.js 应用程序。

Answer 1

我刚刚设法自己解决了这个问题。在调试器中花了一些时间后，我发现 browserify 使用的转换数组包含两次“babelify”和“vueify”。

然后发生的事情可能是像这样应用转换:bablify -> vueify -> babelify -> vueify。我没有花太多时间弄清楚我的东西到底是怎么炸毁的，因为这个问题很容易解决。

在 package.json 或 gulp 文件中指定 browserify 转换。两者都不是。