实践记录 #Typescript #Rollup #打包 #npm

项目地址: https://gitee.com/kmyss/ys-ts.git

概述

在开发前端项目时, 想将更多的重复的东西积累成自己的库, 方便以后去使用. 我主要使用到的

第一次尝试

环境说明

• PNPM
• 只更据开发需要将要用的包导入

  步骤

  没有使用任何的打包模式, 直接将 main 设置为 index.ts, 在要导入的项目中加入 npm link. 此时在 vite 打包运行时出现异常, vue-router 运行存在属性缺失情况.
  应该是在运用被打包时 vite 主动树摇将未使用代码直接抛弃导致. ```json { “name”: “ys-ts”, “version”: “0.0.1”, “description”: “通用TypeScript开发库”, “main”: “index.ts”, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “repository”: { “type”: “git”, “url”: “https://gitee.com/kmyss/ys-ts.git“ }, “keywords”: [ “common” ], “author”: “yss”, “license”: “MIT”, “dependencies”: { “axios”: “^0.24.0”, “events”: “^3.3.0”, “typescript”: “^4.5.2”, “vue”: “^3.2.23”, “vue-router”: “4” }, “devDependencies”: { “@types/node”: “^16.11.12”, “@typescript-eslint/eslint-plugin”: “^5.4.0”, “@typescript-eslint/parser”: “^5.3.0”, “@vue/eslint-config-prettier”: “^6.0.0”, “@vue/eslint-config-typescript”: “^5.0.2”, “eslint”: “^8.4.1”, “eslint-plugin-import”: “^2.25.3”, “eslint-plugin-prettier”: “^3.1.3”, “eslint-plugin-vue”: “^8.2.0”, “prettier”: “^2.5.1” } }

``` 直接将一个 ts 项目导入是会失败的.

同时发现, 如果主项目内已经根据自己项目完成 vue-router 打包就不会存在这个问题.

第二次尝试

环境说明

• pnpm
• 增加了 typesscript 配置, 可以生成到指定目录.

  步骤

  使用 npm link 导入到开发项目内, 任然存在这个问题.
  使用 git 并利用打标签的形式处理依然不行
  标签 0.1.1 -> 0.1.3 都是在此尝试.

  使用rollup 打包

  我这里参考了 https://github.com/pyh996/vue3-rollup-tailwindcss.git项目做的打包脚本,做了打包处理.
  一开始使用 pnpm 作为包管理工具出现 vue 不识别打包的问题, 后面使用 yarn 进行包管理,直接成功打包.

  使用 rollup 构建打包项目的步骤

1. 使用别人已经做好的项目
2. 将项目内的代码替换为自己的
3. 根据自己需要修改插件的配置
4. 打包好后进行版本发布,使用 yarn version 可以更新版本号