我试图了解如何使用 Gulp 构建组件。此时,我有一个如下所示的 Vue 组件:
我的组件.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
未使用?有没有办法做到这一点?如果是这样,怎么办?