组件：制作SDK

Posted 2023-05-10

参考技术A

因为公司的组件化开发的深入，虽然自己只是使用不需要去处理组件（组件模块是另外的小伙伴+大佬架构师负责的），还是需要自己造轮子。就屡屡了...花了点时间整理了下简单的，这些都是为组件做基础，后续会持续更新并实现组件。
废话就不多说了，关于SDK可以自行百度这边就不扯了，开始下面的正文。

静态库： .a 和 .framework

动态库： .dylib 和 .framework

选择 Cocoa Touch Static Library :

Build Active Architecture Only 设置为YES，表示只编译当前的 Architecture 版本，为了适配各种机型需要关闭当前的设置。

可以在编译完成后查看生成的静态库支持的系统架构，终端命令：

结果如下：

一般第三方只提供 release 的版本。

这边就不多讲了，国际化语言跟平时设置是一样的，具体的就附上个通道吧 ios之SDK开发的总结 ，查看上面介绍的第四点即可。

真机、模拟器各需要运行一次生成对应的静态库，根据 第4点 切换环境编译生成对应的静态库，编译快捷键 cmd + B 。
如何查看编译是否成功，查看工程目录如下图红色框里面的名字，如果是红色的则未编译，下图是已经编译后的颜色：

编译完成后可以点击上面红色框 Show In Finder 进入该文件目录。

终端命令

注 ：格式如上，上面的空格不是为了美观，而是格式

举个例子：

静态库制作完成，将静态库拖入工程中，记得导入相应需要暴露的头文件。因为静态库没有提供相应的头文件，只是单纯的一个.a文件。

使用 framework 制作静态库的方法就放到 动态库 中一起说明，具体的可以查看 动态库--2、配置Mach

在制作动态库上跟制作静态库的流程是大同小异，主要介绍不同的。

新建工程，选择如下：

Mach-O Type 默认为动态库，如果需要制作静态库的话在这边修改 framework 类型即可。

配置完成后， cmd + B 分别编译生成模拟器、真机 Framework 。

终端命令与制作.a静态库是一样的，不同的是选择的文件，需要用来合并的文件如下：

终端命令如下:

别忘了该空格的地方带上空格。

举个例子：

输出的文件是 result.lipo ，它的格式是 .lipo ，将该文件修改成合并文件时的文件名并放入其中一个 framework 中替换，通用的 Framework 制作好了。

图中红色框的文件是替换合并后的文件。

将库导入需要使用的工程中即可。

在工程中新建bundle,iOS->Resource->Setting Bundle 命名bundle，比如Resource.bundle。

创建一个文件夹如：images，将需要放入的图片拖进去即可，拖进去后Xcode还是未显示出加入的图片，可以将bundle取出然后重新添加进去就有了。

项目中导入使用的时候需要配置的编译参数 Build Settings -> Linking -> Other Linker Flags ，相关的介绍附上。

如果静态库中有 category ，那么需要添加 -ObjC 参数标识，否则可能会报： unrecognized selector sent to instance ,因为链接器就会把静态库中所有的Objective-C类和分类都加载到最后的可执行文件中。

会让链接器把所有找到的目标文件都加载到可执行文件中，但是千万不要随便使用这个参数！假如你使用了不止一个静态库文件，然后又使用了这个参数，那么你很有可能会遇到 ld: duplicate symbol 错误，因为不同的库文件里面可能会有相同的目标文件，所以建议在遇到 -ObjC 失效的情况下使用 -force_load 参数。

所做的事情跟 -all_load 其实是一样的，但是 -force_load 需要指定要进行全部加载的库文件的路径，这样的话，你就只是完全加载了一个库文件，不影响其余库文件的按需加载

iOS-SDK从无到有（学有所出，有所记）
配置和使用静态库
iOS之SDK开发的总结
iOS 库.a 和 framework的区别和创建

如何使用 Vue CLI 一次将多个 Vue.js 组件构建为原生 Web 组件？

【中文标题】如何使用 Vue CLI 一次将多个 Vue.js 组件构建为原生 Web 组件？

【英文标题】：How can I build multiple Vue.js components to Native Web Components using Vue CLI at once?

【发布时间】：2020-07-17 04:20:41

【问题描述】：

我是 Vue.js 的新手，想使用它制作一个 Web 组件的 SDK。我可以像这样制作一个 Web 组件：

ma​​in.js：

import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-component-wrapper';

const customElement = wrap(Vue, App);

window.customElements.define('sky-chat', customElement);

cli命令：

vue build --target wc --name sky-chat ./src/main.js

但这仅适用于单个组件。如何一次构建一堆 .vue 文件以将 Web 组件分离到单独的 js 文件中？

如何在构建后自动生成包含所有组件的测试html，以便在dist文件夹中进行测试？

谢谢

【参考方案1】：

Version 4.3.0 添加了对 specifying multiple web components 通过逗号分隔的全局模式构建的支持。

例子：

vue-cli-service build --target wc --name myprefix src/components/core*.vue,src/components/basic*.vue

vue-cli-service build --target wc --name myprefix src/components/myFirst.vue,src/components/mySecond.vue

这会为每个指定的入口点生成一个单独的 Web 组件，以及一个包含所有组件的 demo.html。但是，似乎不支持每个 Web 组件单独的 .js 文件。 Web 组件被捆绑到一个文件中。

【讨论】：

是4.3版但是显示错误：“Entry file .\src\components*.vue does not exist.”

我使用的是 vue 构建。使用 vue-cli-service 解决了这个问题:-)

【参考方案2】：

您可以创建一个 vue 插件来将 vue 文件捆绑在一起。

// plugin.js

// your components
import Component1 from '/src/components/Component1.vue'
import Component2 from '/src/components/Component2.vue'
import Component3 from '/src/components/Component3.vue'

// This exports the plugin object.
export default 
  install (Vue, options) 
     // Add a component or directive to your plugin, so it will be installed globally to your project.
     Vue.component('component1', Component1)
     Vue.component('component2', Component2)
     Vue.component('component3', Component3)
  



// your main vue file:

import myPlugin from './plugin.js'
Vue.use(myPlugin);

new Vue(
//...
)

现在您可以在任何地方使用插件中包含的所有组件，而无需在每个文件中导入它们。

我是否正确理解了您的问题？

【讨论】：

谢谢，但正如我所说，我需要“在单独的 js 文件中单独的 Web 组件”

所以你想把你的 .vue 文件导出成可以在非 vue 页面上使用的独立 .js 文件？