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

Question

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

包.json：

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

.babelrc 文件：

{
  "presets": ["es2015"]
}

由于gulp-browserify现在维护时间更长，我使用这个秘籍将整个工作流程整合到一个单一的 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 文件不同，只有命令生成的 build.js 文件npm run build才能正确运行我的 Vue.js 应用程序。

Answer 1

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

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

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