gulp - vuetify - Vueify: ''import'' y ''export'' pueden aparecer solo con ''sourceType: module''

js browserify

Question

Estoy usando Vue. Así es como estoy construyendo en mi gulpfile:

browserify(''./main.js'')
.transform(vueify)
.bundle()
.pipe( fs.createWriteStream(''./build/bundle.js'') );

El problema es que vueify no maneja las exportaciones de es6 en mis archivos .js. Solo funciona en componentes .vue. Funciona con module.exports , pero me gustaría aprovechar el código es6 en mis archivos .js.

Cuando se llama bundle() , actualmente recibo el error:

''import'' and ''export'' may appear only with ''sourceType: module''

¿Hay alguna manera de modificar el archivo gulpfile para manejar archivos js usando es6 que mis componentes .vue están importando?

Answer 1

Después de horas de luchar, finalmente lo descubrí.

1. Instala babelify: npm install --save-dev babelify
2. Agregue esto a la parte superior de su gulpfile: var babelify = require( ''babelify'' ) ;

3. Añadir .transform( babelify ) :

   return browserify(''./main.js'') //tells browserify where to start, but doesn''t run the resolve algorithm yet
   .transform( vueify ) //executes vueify to transform vue components to js
   .transform( babelify ) //executes babelify to transform es6 to es5
   .bundle() //runs the module resolve algorithm on all the require() statements      
   .pipe( fs.createWriteStream(''./build/bundle.js'') );