This repository was archived by the owner on Dec 26, 2018. It is now read-only.
This repository was archived by the owner on Dec 26, 2018. It is now read-only.
babel in vues #171
Open
Description
I think my problem is that I have es6 in my vues. I am getting:
[09:33:36] Starting 'public'...
events.js:160
throw er; // Unhandled 'error' event
^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "s
tart"
That error doesn't really tell me where it is coming from, but if I null-op the public script the rest of the build works. Here's that script:
gulp.task('public', ['public/styles'], () => {
mkdirp.sync(dest+'/public/scripts')
return browserify('public/scripts/demo.js')
.transform(vueify)
.bundle()
.pipe(fs.createWriteStream(dest+'/public/scripts/index.js'))
})It's dependency public/styles definitely does work.
So, I thought, let's try to compile them manually. I ensured I have babel-core and babel-preset-latest. Then: built the files:
.babelrc
{ "presets": ["latest"]}
vue.config.js
var babel = require("babel-core");
module.exports = {
customCompilers: {
// for tags with lang="es6"
es6: function (content, cb, compiler, filePath) {
// content: content extracted from lang="es6" blocks
// cb: the callback to call when you're done compiling
// compiler: the vueify compiler instance
// filePath: the path for the file being compiled
//
// compile some ES6... and when you're done:
const babelified = babel.transform(content) // what to do with this funky babelified.map ?
cb(null, babelified.code)
}
}Then I changed my vues to have that tag, like:
<template>
<div class="container">
<app-header></app-header>
<div class="row"><div class="col-xs-12">
<transition name="slide" mode="out-in">
<router-view></router-view>
</transition>
</div></div>
</div>
</template>
<script lang="es6">
import Header from './Header.vue'
export default {
components: {
appHeader: Header
},
created() {
this.$store.dispatch('initClasses')
}
}
</script>
<style>
body {
padding: 5vmin;
}
.slide-enter-active { animation: slide-in 200ms ease-out forwards }
.slide-leave-active { animation: slide-out 200ms ease-out forwards }
@keyframes slide-in {
from { transform: translateY(-30vmin); opacity: 0 }
to { transform: translateY(0px); opacity: 1}
}
@keyframes slide-out {
from { transform: translateY(0px); opacity: 1 }
to { transform: translateY(-30vmin); opacity: 0}
}
</style>Problem is, I still get the same error. What am I doing wrong?
ps> when I run it by the commandline:
> node_modules\.bin\browserify -t vueify -e .\public\scripts\demo.js -o .\
dist\public\scripts\index.js
C:\Users\roberto\github\cmst385-accessibility\public\scripts\demo.js:1
import Vue from 'vue'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
pps> my devDeps might be useful... these are all just installed in the last week:
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-latest": "^6.22.0",
"browserify": "^14.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-util": "^3.0.8",
"gulp-vueify": "0.0.3",
"mkdirp": "^0.5.1",
"vueify": "^9.4.0"
},
Metadata
Metadata
Assignees
Labels
No labels