I've got the following gulpfile.js:
var gulp = require('gulp'),
babelify = require('babelify'),
browserify = require('browserify'),
envify = require('envify/custom'),
eslint = require('gulp-eslint'),
stylelint = require('gulp-stylelint'),
vueify = require('vueify');
var vueCompile = function (app) {
var b = browserify({
entries: 'Views/Ui/src/' + app + '/main.js',
debug: true,
paths: ['./node_modules', './node_modules/globalize/dist'],
transform: [babelify, vueify]
});
return b.transform(
{ global: true }, // Required in order to process node_modules files
envify({ NODE_ENV: process.env.NODE_ENV })
)
.bundle()
// .pipe(source('ui.js'))
// .pipe(buffer())
// .pipe(process.env.NODE_ENV === 'production' ? uglify() : buffer())
// .pipe(gulp.dest('Views/Ui/js/' + app))
};
gulp.task('vue', function () {
return vueCompile('ui');
});
and the following package.json dependencies:
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.13.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.13.0",
"babel-runtime": "^6.26.0",
"babelify": "7.3.0",
"browserify": "^16.2.2",
"dateformat": "^1.0.12",
"envify": "^4.1.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^2.0.11",
"gulp-debug": "3.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.9",
"gulp-zip": "^3.2.0",
"merge-stream": "^1.0.1",
"node-sass": "^3.13.1",
"run-sequence": "^2.1.0",
"sassify": "^2.0.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^1.1.0",
"vue": "^2.5.16",
"vue-resource": "1.5.1",
"vueify": "^9.4.0",
"vuex": "^2.0.0"
},
"dependencies": {
"acorn": "^6.0.4",
"cldr-core": "^33.0.0",
"cldr-dates-full": "^33.0.0",
"cldr-numbers-full": "^33.0.0",
"devextreme": "18.2.3",
"devextreme-vue": "18.2.3",
"eslint": "^3.18.0",
"eslint-plugin-vue": "beta",
"globalize": "^1.3.0",
"gulp-eslint": "^4.0.0",
"gulp-phpcs": "^2.2.0",
"gulp-stylelint": "^4.0.0",
"quill": "^1.3.6",
"stylelint": "^8.0.0",
"stylelint-config-recommended": "^1.0.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-processor-html": "^1.0.0",
"v-hotkey": "^0.2.3",
"vinyl-source-stream": "^1.1.0"
}
Since I'm trying to minimize my example it may be that there are a few dependencies which are not necessary for the example.
My main.js starts with the following line of code:
import App from './components/App.vue'
If I'm going to run the gulp task vue
it ends in the following output:
[10:57:57] Using gulpfile ...\gulpfile.js
[10:57:57] Starting 'vue'...
[10:57:57] 'vue' errored after 68 ms
[10:57:57] Error:
...\Ui\src\akte\main.js:1
import App from './components/App.vue';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
As I can say, babelify doesn't seem to run successfully, because the exception will be thrown when the .bundle()
method will be called.
Am I missing something basic?
I've found the answer by myself. So just in case someone has the same problem, here is my solution:
The
.babelrc
file was missing, so something went wrong while transforming the code. My file has the following content:After adding the file in the same directory as the
gulpfile.js
everything works as expected.