0

我想写 vue demo 用于教育教学目的，为了只关注 vue 部分，我不想介绍 npm、webpack 或 browserify 之类的 bundler 等。

所以我使用babel-standalone. 我也想用vue-class-component。但是现在我无法使用 and 的构建esm，总之我想支持在我的 main.js 中编写这样的代码vuevue-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出错。

现在我可以使用以下样式使其工作，但使用Componentofvue-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

4

1 回答 1

0

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

于 2019-10-02T10:54:28.600 回答