Babel-Standalone не переносит модуль ESM - PullRequest
0 голосов
/ 14 мая 2019

Я хочу написать демо-версию vue для образовательных целей обучения, чтобы сфокусировать внимание только на vue-части, я не хочу вводить npm, такой как webpack или browserify и так далее.

Поэтому я пишу код, используя babel-standalone.Я также хочу использовать vue-class-component.Но теперь я не могу использовать esm сборку vue и vue-class-component, короче говоря, я хочу поддержать такой код записи в моем main.js

import Vue from '../vender/vue.esm.browser';
import Component from '../vender/vue-class-component.esm';

@Component
class App extends Vue {
//......
}

Если я написал код каквыше я получил Uncaught ReferenceError: require is not defined eror.

Теперь я могу заставить его работать, используя следующий стиль, но использование Component из vue-class-component безобразно.

  <!-- the html contain these scripts -->
  <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-class-component@7.1.0/dist/vue-class-component.js"></script>
  <script src="vender/babel.min.js"></script>
  <!-- fix regenerator not defined -->
  <script src="vender/regenerator-runtime.js"></script>
  <script src="js/main.js"
    data-plugins="transform-runtime,transform-class-properties,transform-decorators-legacy,transform-regenerator"
    data-presets="es2015,stage-1" type="text/babel">
  </script>

// js/main.js
const Component = VueClassComponent.default;

@Component
class App extends Vue {
//......
}

более подробную информацию можно найти на https://github.com/liudonghua123/todos/tree/master/todos-vue-class-component

...