9

我已经在我的工作流程中使用了 gulp，我目前没有使用 webpack 或 browserify，但是编译 Vue 2.x 组件似乎需要其中一个，没有主动维护的机制可以将 Vue 组件直接编译为 gulp 任务.

我已经搜索过，似乎找不到工作参考来简单地将带有*.vue组件的目录编译成单个 JavaScript 文件，然后我可以从我的页面链接该文件。我只想创建和使用一些组件，而不是创建 SPA。

这是我所拥有的：

gulpfile.js

const scriptDestFolder = "\\foo\\";
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const gulp = require("gulp");
const vueify = require('vueify');

gulp.task('vue', function () {
    return browserify({ 
                entries: ['./vuecomponents.js'],
                transform: [vueify]
        })
        .bundle()
        .pipe(source('vue-bundle.js'))
        .pipe(gulp.dest(scriptDestFolder));
});

vuecomponents.js

var Vue = require('vue');
var App = require('./vue/app.vue');

app.vue 文件与此处的示例相同。我无意真正拥有一个“应用程序”组件，我只是想获得一个示例，我会用我的单文件组件列表替换它。

结果如下：

Error: Parsing file \\blah\vue\app.vue:
'import' and 'export' may only appear at the top level (14:0)

我难住了。我认为browserify 正在尝试在编译之前解析原始 vue 代码，但同样，我是 browserify 的新手。

4

1 回答 1

1

实际上，我去年为此改编了一个插件，基于vueify但没有 browserify。我认为它完全符合您的要求。

你可以在这里找到它：https ://www.npmjs.com/package/gulp-vueify2

var vueify = require('gulp-vueify2');

gulp.task('vueify', function () {
  return gulp.src('components/**/*.vue')
    .pipe(vueify(options))
    .pipe(gulp.dest('./dist'));
});

对于不需要使用 gulp 的人来说，有更多一致的解决方案来编译 vue 组件，例如用于库的bili或用于应用程序的parceljs。

最后但并非最不重要的一点是，如果您准备好强制执行一些约定，Nuxt是编译您的应用程序的完美方式，它具有最少的配置工作和可选的内置服务器端渲染。

于 2018-06-06T09:59:47.990 回答