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

【问题标题】：Move browserify workflow into gulp task [vueify, browserify, babelify]将 browserify 工作流程移动到 gulp 任务中 [vueify, browserify, babelify]
【发布时间】：2016-12-22 02:36:48
【问题描述】：

我正在尝试将以下 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 应用程序。

【问题讨论】：

欢迎来到 SO @HackMac，你能清楚地说明问题是什么吗？
我正在尝试以几乎相同的方式（并且失败）做同样的事情。我的工作基于带有 App.vue 和 Hello.vue 的 vue cli 默认应用程序。 App.vue 被正确处理，而 Hello.vue 根本没有被 vueify 处理，尽管被 App.vue 导入。已经浪费了好几个小时试图解决这个问题，所以如果你发现了问题，我希望你不介意分享:)

标签： npm gulp browserify vue.js vue-component

【解决方案1】：

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

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

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

【讨论】：