babel-standalone不转译esm模块

时间:2019-05-14 02:14:27

标签: vue.js requirejs babeljs vue-class-components

我想编写用于教育教学目的的vue演示,为了仅关注vue部分,我不想介绍npm,像webpack这样的bundler或browserify等。

因此,我使用babel-standalone编写代码。我也想使用vue-class-component。但是现在我无法使用esmvue的{​​{1}}构建,简而言之,我想在main.js中支持这样的编写代码

vue-class-component

如果我像上面那样编写代码,则会出现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中的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>

更多详细信息,请访问https://github.com/liudonghua123/todos/tree/master/todos-vue-class-component

1 个答案:

答案 0 :(得分:0)

您需要添加到数据插件:“ transform-es2015-modules-umd”