将浏览工作流程转换为一揽子任务[vueify，browserify，babelify] [英] Move browserify workflow into gulp task [vueify, browserify, babelify]

问题描述

我试图将以下browserify工作流迁移到一个单独的gulp任务中：

package.json：

 scripts：{
build：browserify src / main.js> dist / build.js
 $，
 ... 
browserify：{
transform：[
vueify，
babelify
] 
 
  

.babelrc文件：

  {
预设：[es2015] 
} 
  

由于现在 gulp-browserify 更长的维护时间，我使用这个配方得到整个工作流程变成了一个单一的吞咽任务：

$ $ $ $ $ $ $ $ $ $ gulp.task（'build'，function（）{
var b = browserify（{
entries：'./src/main.js'，
debug：true，
transform：[vueify，ba belify.configure（{presets：[es2015]}）]
}）;
返回b.bundle（）
.pipe（source（'build.js'））
.pipe（buffer（））
.on（'error'，gutil。日志）
.pipe（gulp.dest（'./ dist /'））;
}）;

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

解决方案

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

接下来会发生的变化可能是这样应用变换：bablify - > vueify - > babelify - > vueify。我没有花费太多时间来弄清楚如何炸毁我的东西，因为问题很容易摆脱。

可以在package.json中指定browserify变换或者在你的吞噬文件中。不是两种。

I'm trying to migrate the following browserify workflow into a single gulp task:

package.json:

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

.babelrc file:

{
  "presets": ["es2015"]
}

Since gulp-browserify is now longer maintained, I used this recipe to get the whole workflow into a single gulp task:

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/'));
    });

Unfortunately, the generated build.js files are different and only the build.js file generated by the command npm run build is running my Vue.js App properly.

解决方案

I just managed to get past this problem myself. After spending a bit of time in the debugger I found that the array of transforms used by browserify contained 'babelify' and 'vueify' twice.

What happens then is probably that the transforms are applied like so: bablify -> vueify -> babelify -> vueify. I didn't spend much time figuring out exactly how that blew up my stuff since the problem is easy enough to get rid of.

Either specify browserify transforms in package.json OR in your gulp file. Not both.

这篇关于将浏览工作流程转换为一揽子任务[vueify，browserify，babelify]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！