如何使用SolidJs构建自定义库

huangapple go评论53阅读模式
英文:

How to build custom library with SolidJs

问题

  1. 如何使用 SolidJs 框架构建自定义库
  2. 如何在 Solidjs 应用程序中使用该库
  3. 我正在使用 ViteJs 作为构建工具
  4. 非常感谢。
英文:

I'm actually struggling on how to build a custom lib with solidJs framework

  1. how to build the lib
  2. how to use the lib in a Solidjs app

i'm using viteJs as a build tool

Thanks alot.

答案1

得分: 1

如果你所指的“库”是指JavaScript模块,那么SolidJS的信号和组件并没有什么特别之处。它们只是普通的JavaScript函数和变量。你可以在你的库中创建和导出它们,然后在另一个应用程序或模块中导入它们。

NPM库是带有package.json文件的JavaScript模块,该文件设置了入口点和依赖要求。

你可能想知道是否需要将solid-js添加为依赖项,可能不需要,因为前端应用程序会处理这部分,库不应该关心应用程序的依赖关系。不过,你可以将solid-js添加为开发依赖项或对等依赖项。

至于CSS依赖关系,这完全取决于你的设置以及你将如何为元素添加样式。如果你使用的是Vite和CSS模块,那么你可以在你的库中定义CSS模块,并在你的组件中使用它们。当你导入一个组件时,该组件将引入它所使用的CSS模块,然后打包工具会处理剩下的事情。对于静态文件等情况也是相同的。

英文:

If you mean JavaScript modules by library, then there is nothing extra ordinary about SolidJS signals and components. They are just regular JavaScript functions and variables. You can create and export them from your library and import them in an another app or module.

NPM libraries are JavaScript modules with a package.json file that sets entry points and dependency requirements.

You may be wondering if you need to add solid-js as a dependency, probably not because the front-end application does that, a library should not concern itself with the application's dependencies. However you can add solid-js as a dev dependency or peer dependency.

About the CSS dependencies. It totally depends on your setup and how you are going to style elements. If you are using vite and CSS modules, then you can define CSS modules in your library and use them in your components. When you import a component, the component will pull the CSS modules it uses and bundlers will do the rest. It is same for static files etc.

huangapple
  • 本文由 发表于 2023年2月24日 01:17:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/75548184.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定