gulp - 编译不需要`require`的Vue组件 [英] gulp - compiling Vue component without `require`

问题描述

我试图了解如何使用Gulp构建组件。此时，我有一个如下所示的Vue组件：

my-component.vue

 < template> 
< div class =foo> 
< / div> 
< / template> 
 
< script> 
导出默认值{
 data（）{
 return {}; 
}，
 
道具：{
消息：{
类型：字符串，
默认值：''
} 
} ，
 
方法：{
 display：function（）{
 alert（this.message）; 
} 
}，
}; 
< / script> 
  

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

gulpfile.js

  const gulp = require（'gulp'）; 
 const vueify = require（'gulp-vueify2'）; 
 
 gulp.task（'default'，['build']）; 
 $ b $ gulp.task（'build'，function（）{
 return gulp.src（'./ src / my-component.vue'）
 .pipe（vueify（ ））
 .pipe（gulp.dest（'./ deploy'））
; 
}）; 
  

当我运行这个时，我在deploy目录中有my-component.js。当我查看该文件时，我在my-component.js的顶部看到以下内容：
$ b


var __vueify_style_dispose__ = require（ vueify / lib / insert-css）


我试图在HTML文件中加载组件：

 < script type =text / javascriptsrc =./ my-component.js>< /脚本> 
  

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

 未捕获的ReferenceError：require未定义
  

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

解决方案

好的，我找到了一些不需要任何需要的模块。
这有点丑，所以你可能不喜欢它。





第1步：
在<$ c中提取CSS $ c> gulpfile.js 。

  const gulp = require（'gulp'）; 
 const vueify = require（'gulp-vueify2'）; 
 
 gulp.task（'default'，['build']）; 
 $ b $ 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 {}; 
}，
 
道具：{
消息：{
类型：字符串，
默认值：''
} 
} 
}; 
 //好吧，hu，你没有模块，所以把你的组件保存在某个地方。 
 window.vueComponents ['my-component'] = module.exports; 
< / script> 
 
< style> 
 .foo {
 color：red; 
} 
< / style> 
  

第3步 index.html 。

 < html> 
< head> 
< link rel =stylesheettype =text / csshref =/ bundle.css> 
< script src =https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js>< / script> 
< script> 
 window.module = {}; //只是避免错误，因为你没有模块
 window.vueComponents = {}; //组件的全局注册... 
< / script> 
< script src =./ my-component.js>< / script> 
< / head> 
 
< body> 
< div id =app> 
< div> 
 {{foo}} 
< my-component>< / my-component> 
< / div> 
< / div> 
 
< script> 
 new Vue（{
 //这里你给你的组件vue实例
组件：window.vueComponents，
 data（）{
 return {
 foo：'你好'
}; 
}，
 el：'#app'
}）; 
< / script> 
< / body> 
< / html> 
  

I'm trying to understand how to build a component with Gulp. At this time, I have a Vue component that looks like this:

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>

I'm building this component via Gulp. My gulpfile.js has the following:

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

When I run this, I have my-component.js in the "deploy" directory. When I view that file, I see the following at the top of my-component.js

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

I'm trying to load the component in an HTML file like this:

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

The script loads. However, there is an error in the console that says:

Uncaught ReferenceError: require is not defined

How do I build the component such that require is not used? Is there a way to do this? If so, how?

解决方案

Okay I did find something without the need of any require module. That's a bit ugly so you may not like it.

Step 1: Extract CSS in 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({
            extractCSS: true,
            CSSOut: './deploy/bundle.css'
        }))
        .pipe(gulp.dest('./deploy'))
    ;
});

Step 2: Your component, 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>

Step 3: The 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组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！