[edit] This is in my opinion not a vue-loader fault but one that affects it and causes bad times nonetheless. Until Babel issue 166 is resolved I propose that this issue be left here. Work arounds are to downgrade to Babel 5 or use Buble transpiler instead.
I read that vue-loader is capable of finding if babel-loader is being used and that it can pass JS through to Babel within the script tags of the .vue file. I'm learning on Vue starting at 2.0.1 and I have an issue where Babel is not processing my .vue component but it is doing so in my other .js files.
Here is my loaders section:
}, {
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
cacheDirectory: babelCacheDir,
plugins: [
require.resolve('babel-plugin-transform-runtime')
],
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-es2016'),
require.resolve('babel-preset-es2017'),
require.resolve('babel-preset-stage-0')
]
}
}, {
test: /\.vue$/,
loader: "vue"
}, {
packages.json
"webpack": "1.13.2",
"node-libs-browser": "1.0.0",
"webpack-dev-server": "1.16.1",
"extract-text-webpack-plugin": "1.0.1",
...
"babel-core": "6.17.0",
"babel-polyfill": "6.16.0",
"babel-plugin-transform-runtime": "6.15.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2016": "6.16.0",
"babel-preset-es2017": "6.16.0",
"babel-preset-stage-0": "6.16.0",
"babel-loader": "6.2.5",
...
"vue": "2.0.1",
"vue-loader": "9.5.1",
"vue-resource": "1.0.3",
"vue-router": "2.0.0",
"vuex": "2.0.0",
Entry:
// System
import Vue from 'vue/dist/vue'
// Application
import init from 'init'
// Local
import App from './App'
Vue.component('app', App)
// This is transpiled to var
const ABC = 123
init().then(function() {
const app = new Vue({
el: '#app',
template: '<app></app>'
})
})App.vue:
<template>
<div>asdfasdf</div>
</template>
<script>
// export default {
module.export = {
data() {
return {
counter: 0
}
}
}
// This is not transpiled
const A = 123
</script>
<style>
</style>
[edit] This is in my opinion not a
vue-loaderfault but one that affects it and causes bad times nonetheless. Until Babel issue 166 is resolved I propose that this issue be left here. Work arounds are to downgrade to Babel 5 or use Buble transpiler instead.I read that
vue-loaderis capable of finding ifbabel-loaderis being used and that it can pass JS through to Babel within the script tags of the .vue file. I'm learning on Vue starting at 2.0.1 and I have an issue where Babel is not processing my .vue component but it is doing so in my other .js files.Here is my loaders section:
packages.json
Entry:
App.vue: