I'm currently exploring the process of constructing a component with Gulp. Right now, I am working on a Vue component that has the following structure:
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 am in the process of building this component with the help of Gulp. Here is a snippet from my 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'))
;
});
Upon executing the build, I find my-component.js in the "deploy" directory. When I inspect that file, I notice the following at the beginning of my-component.js
var __vueify_style_dispose__ = require("vueify/lib/insert-css")
I am attempting to incorporate the component in an HTML file using the following approach:
<script type="text/javascript" src="./my-component.js"></script>
While the script is successfully loaded, an error appears in the console stating:
Uncaught ReferenceError: require is not defined
How can I construct the component in a way that does not rely on require? Is there a method to achieve this? If so, what is the process?