手工搭建一个solidjs环境-记npm及vite的使用 最后更新时间：2025年05月17日 用于记录手工搭建一个solidjs环境的流程，后面忘记了懒得再去翻资料。 默认已有node环境。 #### 安装vite ```shell npm install vite ``` #### 配置package文件 安装的vite功能，基本可以通过`node_modules/.bin/`下的`vite`脚本直接运行。也可以使用`npx vite`运行 但是为了项目环境还是配置一下package文件。 主要是配置scripts部分。这一部分本质也是直接运行两大系统的shell或者cmd脚本 ```json { "scripts":{ "dev":"vite", "build":"vite build", "preview":"vite preview" } } ``` #### 配置index.html index.html按照官方文档的意思是vite工具下的程序入口，直接创建在node项目根路径下。也可以通过配置`vite.config.js`的方式调整入口。参考：1.[index.html 与项目根目录](https://vitejs.cn/vite6-cn/guide/#index-html-and-project-root "index.html 与项目根目录")2.[多页面应用模式](https://vitejs.cn/vite6-cn/guide/build.html#multi-page-app "多页面应用模式") 注意导入solidjs的代码入口 ```html <html> <head> <title>test app</title> <!-- 这里是程序入口 --> <script type="module" src="./src/index.jsx"></script> <!-- 这里是程序入口 --> </head> <body> <div id="app"></div> </body> </html> ``` #### 配置vite.config.js 参考官方文档，在项目根目录下创建一个`vite.config.js`文件。简单构造一个配置。 参考：[vite官方配置文档](https://vitejs.cn/vite6-cn/config/server-options.html "vite官方配置文档") ```json import { defineConfig } from "vite" // vite.config.js export default defineConfig( { server: { port: 3000, open: true, proxy: {} }, base: '/', build: { outDir: 'dist', assetsDir: 'assets', assetsInlineLimit: 4096, rollupOptions: { output: { chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/[name]-[hash].[ext]' } } } } ) ``` #### 安装vite插件vite-plugin-solid 命令： ```shell npm install vite-plugin-solid ``` 调整vite.config.js,导入并追加插件配置 ```js import solidPlugin from vite-plugin-solid { plugins:[solidPlugin()], } ``` #### 安装solid并导入solid构造项目 安装 ```shell npm install solid-js babel-preset-solid ``` 在src目录下创建`index.jsx`和`App.jsx`文件 编写基本程序 1.index.jsx ```js import { render } from 'solid-js/web' import App from './App' render(() => <App />, document.getElementById('app')) ``` 2.App.jsx ```js function App(){ return ( <div> test </div> ) } export default App; ``` 构造好以后直接启动，不出意外的话可以使用了
Comments | NOTHING