gulp - 在没有 `require` 的情况下编译 Vue 组件答案

【问题标题】：gulp - compiling Vue component without `require`gulp - 在没有 `require` 的情况下编译 Vue 组件
【发布时间】：2017-06-13 12:33:17
【问题描述】：

我正在尝试了解如何使用 Gulp 构建组件。这时候，我有一个 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>

我正在通过 Gulp 构建这个组件。我的 gulpfile.js 有以下内容：

gulpfile.js

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

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

gulp.task('build', function() {
    return gulp.src('./src/my-component.vue')
        .pipe(vueify())
        .pipe(gulp.dest('./deploy'))
    ;
});

当我运行它时，我的“deploy”目录中有 my-component.js。当我查看该文件时，我在 my-component.js 的顶部看到以下内容

var __vueify_style_dispose__ = require("vueify/lib/insert-css")

我正在尝试将组件加载到这样的 HTML 文件中：

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

脚本加载。但是，控制台中有一个错误提示：

Uncaught ReferenceError: require is not defined

如何构建不使用require 的组件？有没有办法做到这一点？如果有，怎么做？

【问题讨论】：

其实我不确定。您可以通过使用 gulp-vueify2 extractCSS 选项提取 css 来避免此错误。但是我认为如果不填充 require() （或者通过在支持模块的环境中执行它......），你不能使生成的组件工作。我为此道歉；这可能是一个非常糟糕的建议。我会尝试找到一个合理的解决方法，但我并不太乐观。

标签： javascript gulp vue.js

【解决方案1】：

好的，我确实找到了不需要任何 require 模块的东西。这有点难看，所以你可能不喜欢它。

第 1 步： 提取gulpfile.js中的CSS。

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

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

gulp.task('build', function() {
    return gulp.src('./src/my-component.vue')
        .pipe(vueify({
            extractCSS: true,
            CSSOut: './deploy/bundle.css'
        }))
        .pipe(gulp.dest('./deploy'))
    ;
});

第 2 步：您的组件，my-component.vue。

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

<script>
  module.exports = {
      data() {
          return {};
      },

      props: {
          message: {
              type: String,
              default: ''
          }
      }
  };
  // Well, hu, you have no module so just keep your component somewhere.
  window.vueComponents['my-component'] = module.exports;
</script>

<style>
    .foo {
        color: red;
    }
</style>

第 3 步：index.html。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/bundle.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
        <script>
            window.module = {}; // Yeah just avoid the error as you have no module
            window.vueComponents = {}; // Global register of your components...
        </script>
        <script src="./my-component.js"></script>
    </head>

    <body>
        <div id="app">
            <div>
                {{ foo }}
                <my-component></my-component>
            </div>
        </div>

        <script>
            new Vue({
                // Here you give your component to your vue instance
                components: window.vueComponents, 
                data() {
                    return {
                        foo: 'Hello'
                    };
                },
                el: '#app'
            });
        </script>
    </body>
</html>

【讨论】：

当然，试试 js bundle。