在 CLI 构建中使用 CDN 组件? [英] Use CDN Components with a CLI Build?
问题描述
所以，到目前为止，我们一直在使用标准脚本标签为 Vue 构建我们的 Vue 应用程序(主要是为了我们可以慢慢地从 jQuery/Knockout-heavy 应用程序过渡)，但随着我们开始转换我们更复杂的应用程序，如果我们不尽快切换到 CLI 构建，我已经可以看到我们将要推进的维护问题.
So, up until now, we've been building our Vue applications utilizing the standard script tag include for Vue (mostly so we can slowly transition from jQuery/Knockout-heavy apps), but as we start to convert our more complex apps, I can already see the maintenance issues we're going to have moving forward if we don't make the switch to the CLI build sooner than later.
现在，这对我们的许多应用程序来说都不是问题，但由于我们在 Vue 应用程序的早期采用了内部 CDN"方法，因此在 Webpack 中捆绑所有内容似乎在多功能性方面倒退了一步.现在我们提供 4 个文件，然后我们的 MVC 应用程序中的每个路由都有自己关联的 Vue 实例(即:about.js)，它控制整个 UI 及其逻辑.我们的 CDN 服务于:1. polyfills.js(用于浏览器兼容性)，2. vendor.js(axios，moment.js 和其他一些)，3. vue.js(vue + vee-validate)和 4.components.js(我们自己的自定义 UI 组件库).
Now, this isn't an issue for many of our apps, but since we adopted an "internal CDN" approach early on in our Vue apps, bundling everything in Webpack seems like somewhat of a step back in versatility. Right now we serve 4 files and then each route within our MVC app has its own associated Vue instance (ie: about.js) which controls the entire UI and its logic. Our CDN serves: 1. polyfills.js (for browser compatibility), 2. vendor.js (axios, moment.js and a few others), 3. vue.js (vue + vee-validate) and 4. components.js (our own custom UI component library).
总的来说，我不关心 1-3.这些都可以捆绑在 webpack CLI 构建中.第 4 点是我挂断电话，因为通过 CDN 提供服务使我们能够立即将更新推送到我们所有的应用程序，而无需运行新版本.目前，我们只有 7 个应用程序运行完整的 Vue 构建，但我们的目的是最终将我们所有 80 多个内部应用程序以及几个现有和新的外部应用程序转换为 Vue.如果我们的 30 个应用程序正在使用我们的一个共享组件，并且需要对其进行更新以解决任何功能、可访问性等问题，这意味着我们必须重建所有 30 个应用程序并推送它们，这根本不理想.
In general, I don't care about 1-3. These can all be bundled in the webpack CLI build. It's #4 that I'm hung up on, as serving over the CDN has allowed us to push updates to all of our apps instantaneously, without running a new build. Right now, we only have 7 apps running a full Vue build, but our intention is to eventually convert all 80+ of our internal applications, plus several existing and new external applications over to Vue. If 30 of our apps are using one of our shared components and it needs to be updated to address any functional, accessibility, etc. concerns, that means we have to rebuild all 30 apps and push them, which isn't ideal at all.
有没有办法继续只为我们的组件使用 CDN 构建，并将其余部分作为 SPA 与 Webpack 捆绑在一起?
Is there a way to continue to use the CDN build just for our components and bundle the rest as a SPA with Webpack?
请注意:这与引用外部 JS 库(如 jQuery)不同.我正在尝试添加 Vue 组件.如果您从外部加载这样的库，然后尝试通过以下方式导入组件:
Please note: This is not the same as referencing an external JS library, like jQuery. I'm trying to add Vue Components. If you load a library like this externally and then try to import the component via:
<ComponentName/>
Vue 会给你一个控制台错误说:
Vue will give you a console error saying:
[Vue warn]: Unknown custom element: <ComponentName> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at srcApp.vue
<Root>
简单地添加如下:
export default {
name: 'app',
components: {
ComponentName
}
}
将返回:
Uncaught ReferenceError: ComponentName is not defined
因为没有导入.但是尝试导入它也不起作用，因为它不存在于应用程序中，它是外部的.
Because there's no import. But trying to import it also won't work, because it doesn't exist in the app, it's external.
推荐答案
您希望使用 Vue webpack CLI 构建来管理您的应用程序，但保持具有独立 Vue 组件的灵活性，即服务作为多个应用程序/项目共有的单独文件.这是您用内部 CDN"描述的架构.
You would like to manage your apps with a Vue webpack CLI build, but keeping the flexibility of having independent Vue components, i.e. served as separate files that are common to several apps / projects. That is an architecture that you describe with an "internal CDN".
正如@RandyCasburn 指出，您可以通过简单地全局公开 Vue(通常从 CDN 将其加载到
