Vue.js - 使用 gulp 编译 .vue 文件答案

【问题标题】：Vue.js - Compile .vue file with gulpVue.js - 使用 gulp 编译 .vue 文件
【发布时间】：2017-11-14 08:20:24
【问题描述】：

我有一个 Vue 组件。这个组件非常基础，看起来像这样：

my-component.vue

<template>
  <div class="foo">
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },

    props: {
      message: {
        type: String,
        default: ''
      }
    },

    methods: {
      display: function() {
        alert(this.message);
      }
    },
  };
</script>

我想用这样的方式将它导入一个 HTML 文件：

<script type="text/javascript" src="/components/my-component.min.js"></script>

然后，我希望能够像这样在我的 HTML 文件中使用该组件：

<my-component message="hello"></my-component>

这可能吗？如果是这样，怎么做？我看到的所有东西都使用 webpack 和一堆其他东西。我有一个工作组件。我只是不知道如何使它易于部署。

我创建了一个 gulpfile 来帮助解决这个问题。这看起来像这样：

gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var webpack = require('webpack-stream');

gulp.task('default', ['build']);

gulp.task('build', [], function() {
    return gulp.src('./src/my-component')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(concat('my-component.min.js'))           
        .pipe(gulp.dest('./deploy'))
    ;
});

当我运行 build gulp 任务时，我收到一条消息： webpack-stream - No files given; aborting compilation

令人困惑的是，我有一些成功运行的单元测试。我正在通过以下命令运行这些测试： nyc mocha-webpack --webpack-config ./webpack.config.js test --recursive --require test/.setup

我做错了什么？如何打包我的组件以便将其导入其他应用程序？

【问题讨论】：

能否请您也与我们分享您的 Webpack 配置？

标签： javascript vue.js

【解决方案1】：

如果你不想使用任何包 - 一个完整的 webpack 包（如果你正在处理一个大项目，请重新考虑这个决定）也不想浏览器化（参见vueify）......那么你可以使用这个包使用 gulp 将单个文件组件编译成单个 js 文件：

https://www.npmjs.com/package/gulp-vueify2

我必须提到我是这个模块的作者。

【讨论】：