Javascript 是否将CDN组件与CLI构建一起使用？

因此，到目前为止，我们一直在使用标准的脚本标记include for Vue构建我们的Vue应用程序（主要是为了让我们可以慢慢地从jQuery/Knockout重应用程序过渡），但随着我们开始转换更复杂的应用程序，我已经看到了如果我们不尽早切换到CLI构建，我们将面临的维护问题

现在，这对我们的许多应用程序来说都不是问题，但由于我们在Vue应用程序的早期采用了“内部CDN”方法，将所有内容捆绑在Webpack中似乎是多功能性的倒退。现在我们提供4个文件，然后MVC应用程序中的每个路由都有自己的关联Vue实例（即：about.js），它控制整个UI及其逻辑。我们的CDN服务：1。polyfills.js（用于浏览器兼容性），2。vendor.js（axios、moment.js和其他一些），3。vue.js（vue+vee验证）和4。js（我们自己的自定义UI组件库）

一般来说，我不在乎1-3。这些都可以捆绑在webpack CLI构建中。我挂断电话的是#4，因为通过CDN服务，我们可以在不运行新版本的情况下，即时将更新推送到所有应用程序。目前，我们只有7个应用程序运行完整的Vue构建，但我们的目标是最终将所有80多个内部应用程序，加上几个现有和新的外部应用程序转换为Vue。如果我们的30个应用程序正在使用我们的一个共享组件，并且它需要更新以解决任何功能、可访问性等问题，这意味着我们必须重建所有30个应用程序并推送它们，这一点都不理想

有没有一种方法可以继续只为我们的组件使用CDN构建，并将其余部分打包为带有Webpack的SPA

请注意：这与引用外部JS库（如jQuery）不同。我正在尝试添加Vue组件。如果您从外部加载这样的库，然后尝试通过以下方式导入组件：

<ComponentName/>

将返回：

Uncaught ReferenceError: ComponentName is not defined

---

因为没有意义。但是尝试导入它也不起作用，因为它不在应用程序中，它是外部的。

从技术上讲，您可以使用它通过HTTP加载

.vue

组件。尽管存在一些限制，但不建议用于生产。

您是否尝试过在

webpack.config.js

中配置多个入口点？然后，您可以使用一个入口点仅加载组件，而使用另一个入口点加载其他所有内容。我相信下面的例子行应该有用

{
  entry: {
    app: './src/app.js', //Exports to /dist/app.js
    search: './src/components.js' //Exports to /dist/components.js
  },
  output: {
    filename: '[name].js',  //[name] is replaced with the 
                            //key names in the entry option(app & search) 
    path: __dirname + '/dist'
  }
}

---

然后创建一个文件

/src/app.js

，用于导入项目1-3；创建一个文件

/src/components.js

，用于导入

.vue

文件。

您希望使用vue webpack CLI构建来管理应用程序，但要保持拥有独立vue组件的灵活性，即作为多个应用程序/项目共用的单独文件使用。这是您用“内部CDN”描述的体系结构

通过@RandyCasburn，您只需全局公开

Vue

（通常从CDN加载

），然后加载使用

Vue.component

全局注册组件的独立文件，即可实现上述目标

参考：

但是，您希望能够将这些独立的Vue组件开发为单文件组件（SFC）

对于您描述的用法，我基本上看到了两种有趣的解决方案：

填补了创建小型构建步骤工具将SFC转换为普通JS文件的空白，该文件可以通过

标记加载，并在

Vue.component

中全局注册组件

不要构建一个通过

Vue.component

注册的JS文件，而是让它公开Vue组件配置/，这样它就可以。这需要做更多的工作，因为您需要将每个消费者应用程序webpack配置设置为异步加载非绑定块

选项1：使用

Vue.component将Vue SFC转换为单个JS文件

实际上，最近有一个模板项目提供了此功能：


用于将单个文件组件（.vue）编译为独立JS文件以在浏览器中使用的生成设置的模板

另见

它使用webpack将
.vue
文件转换为编译的JS文件，该文件在
vue.component
中全局注册组件

如果您对更精简的代码感兴趣，您还可以使用Rollup而不是webpack执行非常类似的过程。使用

这种方法的优点是易于理解，只需重构HTML以加载Vue，然后加载所有常用组件JS文件。即使在开发过程中，这些组件也应该是全球可用的，因此Vue运行时不应该抱怨“未知的自定义元素”，在您的消费者应用程序中，只需不导入它们就可以了

缺点是，无论您是否使用这些组件，都必须在手动之前加载所有这些组件

选项2：将Vue SFC转换为单个JS文件作为“异步”选项对象

这是一个更有趣，但更复杂的设置权利

与前面的解决方案一样，在组件端，您可以使用构建步骤来转换SFC
.vue
文件，但不需要带有
vue.component
声明的额外包装器。只需让webpack或Rollup将component options对象包装在IIFE或UMD中，以便在全局上下文中注册该对象

例如，您的
rollup.config.js
文件如下所示：

从“汇总插件vue”导入VuePlugin
导出默认值{
输入：'components/my component.vue'，
输出：{
文件：“dist/my component.js”，
名称：'MyComponent'，//导入（'my-component'），
},

为此你可以使用，但你必须提供你自己的乐趣
Uncaught ReferenceError: ComponentName is not defined

{
  entry: {
    app: './src/app.js', //Exports to /dist/app.js
    search: './src/components.js' //Exports to /dist/components.js
  },
  output: {
    filename: '[name].js',  //[name] is replaced with the 
                            //key names in the entry option(app & search) 
    path: __dirname + '/dist'
  }
}