@r_npm/r-hooks-vue3

npm发布项目流程

1. 项目的基本架构搭建

   • 创建项目

     mkdir r-hooks-vue3

   • 整个项目目录

     r-hooks-vue3
       - dist
       	- hooks
       	  - index.d.ts
       	  - useTest.d.ts
       	- index.d.ts
       	- r-hooks-vue3.cjs.js
       	- r-hooks-vue3.esm.js
       - src
       	- hooks
       	  - useTest.ts
       	  - index.ts
       	-index.ts
       - .npmignore
       - package.json
       - rollup.config.js
       - tsconfig.json
       - pnpm-lock.yaml
     

   • 配置 package.json

     {
       "name": "your packname", 
       "version": "1.0.0",
       "description": "一个普通的vue3·hooks",
       "keywords": [
         "vue3",
         "vue3-hooks",
         "r-hooks-vue3",
         "hooks"
       ],
       "author": "r_npm",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "rollup -c "
       },
       "license": "ISC",
       "peerDependencies": {
         "vue": "^3.0.0"
       },
       "main": "./dist/r-hooks-vue3.cjs.js",
       "module": "./dist/r-hooks-vue3.esm.js",
       "types": "./dist/index.d.ts",
       "type": "module",
       "files": [
         "dist"
       ],
       "devDependencies": {
         "@rollup/plugin-node-resolve": "^16.0.0",
         "@vue/compiler-sfc": "^3.5.13",
         "@vue/runtime-core": "^3.5.13",
         "rollup": "^4.35.0",
         "rollup-plugin-typescript2": "^0.36.0",
         "typescript": "^5.8.2",
         "vue": "^3.5.13"
       },
       "publishConfig": {
         "access": "public"
       }
     }
     

   • 下载 node_modules

     npm i
     

   • 配置 tsconfig.json

     #生成 tsconfig.json
     npx tsc --init

     {
       "compilerOptions": {
         "target": "ESNext",
         "module": "ESNext",
         "strict": true,
         "moduleResolution": "node",
         "esModuleInterop": true,
         "declaration": true,
         "declarationDir": "dist",
         "rootDir": "src",
         "outDir": "dist",
         "lib": ["DOM", "ESNext"],
         "types": ["@vue/runtime-core"]
       },
       "include": ["src/**/*"],
       "exclude": ["node_modules"]
     }
     

   • 创建并配置 rollup.config.js 可使用vite构建发布，打包后配置的文件路径正确即可。

     import typescript from 'rollup-plugin-typescript2';
     import { nodeResolve } from '@rollup/plugin-node-resolve';
     
     export default {
       input: 'src/index.ts',
       output: [
         {
           file: './dist/r-hooks-vue3.esm.js',
           format: 'esm'
         },
         {
           file: './dist/r-hooks-vue3.cjs.js',
           format: 'cjs'
         }
       ],
       plugins: [
         nodeResolve(),
         typescript({
           tsconfig: './tsconfig.json'
         })
       ],
       external: ['vue'] // 排除 vue 打包
     };
     

   • 忽略不必要的提交，创建 .npmignore

     #.npmignore
     node_modules/
     src/
     tests/
     demo/
     tsconfig.json
     rollup.config.js
     

   • src/index.ts

     export * from "./hooks/index";

   • src/hooks/index.ts

     export * from "./useTest";

   • src/hooks/useTest.ts

     import { ref, Ref } from "vue";
     
     export interface UseCounterReturn {
       count: Ref<number>;
       increment: () => number;
       decrement: () => number;
       reset: () => number;
     }
     
     export function useCounter(initialValue = 0): UseCounterReturn {
       const count = ref(initialValue);
     
       const increment = () => count.value++;
       const decrement = () => count.value--;
       const reset = () => (count.value = initialValue);
     
       return {
         count,
         increment,
         decrement,
         reset,
       };
     }

   • 发布

     npm login 
      - 运行命令后，回车跳转到浏览器登录npm
      - 发布需要关闭镜像源,切换到： https://registry.npmjs.org/ 
      - npm config set registry https://registry.npmjs.org
     npm run build
     npm publish
     

2. 项目中使用

   npm i @r_npm/r-hooks-vue3

   <script setup lang="ts">
   import { useCounter } from "@r_npm/r-hooks-vue3";
   const { count, increment } = useCounter();
   
   </script>
   
   <template>
     <div>{{ count }}</div>
     <button @click="increment">increment</button>
   </template>

3. 拓展

   • 配置@引入

     npm install @rollup/plugin-alias --save-dev

     #rollup.config.js
     import alias from '@rollup/plugin-alias';
     import path from 'path';
     export default { 
     	plugins: [
     	  alias({
             entries: [
             { find: "@", replacement: path.resolve(__dirname, "src") },
             ],
           }),
     	],
     	...其他配置
     }
     
     #tsconfig.json
     {
       "compilerOptions": {
         "baseUrl": ".",
         "paths": {
           "@/*": ["src/*"]
         }
       }
     }

   • 配置单元测试

   • 配置手动测试