在没有捆绑器的情况下使用 Vue？

Question

我正在创建一些实验性网站，它们使用 JavaScript 而不进行捆绑。对于依赖管理，我一直使用 RequireJS，但最近我开始使用 SystemJS，因为它对 HTTP2 有一些非常好的支持。到目前为止，我已经在我的自定义设置 Web 服务器上做了一些实验，结果对于我正在创建的网站来说非常好。例如，首页渲染发生在 400 毫秒左右，整页加载发生在 800 毫秒等。

我这样做是因为我想充分利用 HTTP2，并且我想延迟加载我在某个时刻使用的脚本。像这样的代码更容易维护，缓存更好等等。目前对 Webpack 之类的打包工具很热，但这不是我想要使用的东西。

问题来了：有没有办法使用 Gulp 编译单个 Vue 文件/组件，然后使用 SystemJS 作为 AMD 或 CommonJS 模块加载它们？

编辑：

这就是我想用 SystemJS 和 Vue 实现的目标：

入口点JS文件：

// SystemJS config
SystemJS.config({
  /* ... */
  
  baseURL: './',
  map: {
    // App
    'app': 'scripts/app.min.js',
  
    // Utils
    'axios': 'scripts/vendor/axios/axios.min.js',
    'modernizr': 'scripts/vendor/modernizr/modernizr.min.js',    
  
    // Framework
    'vue': 'scripts/vendor/vue/vue.min.js',
    
    // Components
    'vueHelloWorld': 'scripts/components/hello/vueHelloWorld.js', // <- Compiled VUE component
    'vueMenu': 'scripts/components/menu/vueMenu.js'
  },
  depcache: {
    'vueHelloWorld': ['vue'],
    'vueMenu': ['vue', 'vueHelloWorld']
  }
  
  /* ... */
)};

// Initially Load default scripts
require(['modernizr', 'axios', 'app']);

Vue 组件 vueHelloWorld.js 和 vueMenu.js 是最终结果，从单个文件模板 vueHelloWorld.vue 和 vueMenu.vue 编译成纯 JS。

在那个初始文件之后，app.min.js 被加载，它会声明加载渲染的 vue 组件。

这是我不知道该怎么做的——如何为我想以这种方式加载的每个 Vue 组件呈现单独的文件？

Answer 1

如果我正确理解了这个问题，那么您所要寻找的只是需要一个 *.vue 文件并返回一个已编译的 *.js 文件的东西。您可以尝试使用https://github.com/vuejs/vue-component-compiler 编写自己的东西，或者我最终做的是滥用 rollup 作为我的 vue 编译器，对其进行配置，以便它忽略所有依赖项，因此采用一个 vue 组件并只编译该一个组件.在这里你可以看到实现这一点的配置：https://github.com/ecosia/bazel_rules_nodejs_contrib/blob/master/internal/vue_component/rollup.config.js

Answer 2

看来Async components 和webpacks code splitting 就是你要找的。​​p>

在这里您可以找到一篇关于使用它们的文章：

https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

Answer 3

不，因为单个 Vue 文件 (*.vue) 只能通过 webpack 被 vue-loader 识别，SystemJS 或 AMD 或 CommonJS 与它完全无关，这三个是模块化标准或使您的 javascipts 文件组织的方法。

你也可以这样写。

a.component.js

var ComponentA = {
    template: '#view-a',
}

b.component.js

var ComponentB = {
    template: '#view-b',
}

然后在你的html文件中

<script type="text/x-template" id="view-a">
    <div> .... </div>
</script>

<script type="text/x-template" id="view-b">
    <div> .... </div>
</script>