load component using ES2017 syntax : 'export default'

The document didn't tell how to load component which used ES2017 syntax. So, it toke me some time to figure it out.

Hope the document can complement this example

and here is the code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Meta -->
  <meta charset="UTF-8" />
  <title>http-vue-loader support 'export default'</title>

  <!-- Styles -->  
  <!-- Scripts -->
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

  <div id="demo">
    <h1>
          This example shows how to load a Vue component module using es2017 syntax: 'export default'
    </h1>
    <child></child>
  </div>

  <!-- Scripts -->
  <script>
  // Init Vue!
Vue.use(httpVueLoader);
/*
1.transform es2017 syntax to es2015 syntax and convert to umd module mode 
[!attention!] 
    script tag's attribute "lang"  must equal to  "text/babel" , or you can custom the "lang" attribute value.
eg: 
    <script lang="bable">...<\/script>
    httpVueLoader.langProcessor.babel=script=>{...}
*/
httpVueLoader.langProcessor['text/babel'] = function (script) {
  return Babel.transform(script, {
    moduleId: this.name,
    presets: [
      'es2017',
      'stage-3',
    ],
    plugins: [
      'transform-es2015-modules-umd',
    ],
  }).code;;
};
//2. handle umd module export
httpVueLoader.scriptExportsHandler = function (script) {
  return this.component.script.module.exports.default;
};
var app = new Vue({
  el: '#demo',
  components:{
    child:'url:/child.vue'
  }
})
  </script>
</body>
</html>

child.vue

<template>
    <div>
        {{txt}}
    </div>
</template>

<script lang="text/babel">
    export default {
        name: "child",
        data() {
            return {
                txt: 'This is child component'
            }
        },
    }
</script>

<style scoped>

</style>

FranckFreiburger / http-vue-loader

load component using ES2017 syntax : 'export default' #89

Hope the document can complement this example

full example on codepen

full example