将Vue编译共享的计算函数分离为单独的软件包
P粉421119778
2023-09-01 17:46:49
<p>如何在不同的包之间共享通用的<code>vue/nuxt</code>特定代码?</p>
<p>我不想使用<code>monorepo</code>,但我有一些共享的代码,我想将其分离成自己的包。这个共享的代码(新包)使用<code>@nuxtjs/composition-api</code>编写,只是在不同的组件/模板中反复使用的共享<code>computed</code>和<code>methods</code>。</p>
<p>我不希望将这个包设置为插件。而是直接导入以利用树摇动(就像<code>composition-api</code>一样)。</p>
<p>我熟悉使用<code>rollupjs</code>创建可导入的模块。</p>
<pre class="brush:php;toolbar:false;">//新包
//index.js
export { default as isTrue } from './src/isTrue'
...
//src/isTrue
import { computed } from '@nuxtjs/composition-api'
export default (p) => {
return computed(() => p === 'true') //我不确定这样会不会破坏响应性?!?!
}</pre>
<p>我没有遇到任何问题将其编译为<code>.ssr, .esm, .min</code>格式,通过<code>rollupjs</code></p>
<p>问题出现在我将新包导入到一个工作文件中时。</p>
<pre class="brush:php;toolbar:false;">import { isTrue } from 'new-package'
export default{
name: 'testComp',
setup(props){
return {
isActive: isTrue(props.active)
}
}</pre>
<p>会产生:</p>
<pre class="brush:php;toolbar:false;">[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(VueCompositionAPI)。</pre>
<p>我理解<code>@nuxtjs/composition-api</code>是VueCompositionAPI的包装器。</p>
<p>我不想将新包安装为插件,因此我省略了新包的安装(安装示例:https://github.com/wuruoyun/vue-component-lib-starter/blob/master/src/install.js)</p>
使用了
options API
使用
rollupjs
编译 library.js,并可以导入