Question

我正在尝试了解如何使用Gulp构建组件。这时，我有一个Vue组件，如下所示：

我-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？有没有办法做到这一点？如果是这样，怎么样？

Answer 1

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

第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>

gulp - 编译没有`require`的Vue组件

1 个答案: