雖說 Vite 可以快速產生一個結合 TypeScript 的模版，不過若是以「開發一個 npm 套件」為目的的使用來看，要微調的東西還真不少。這邊筆記下調整的內容。
內容
前置作業
使用下面指令來生成 Vanilla JavaScript + TypeScript 的專案
pnpm create vite 並選擇 Vanilla 和 TypeScript
模版內的檔案調整
刪除項目
1. 預設的 index.html
2. 除了 vite-env.d.ts 外，src 資料夾內的預設檔案
3. public 資料夾
新增項目
1. 根目錄下新增 Readme.md
2. src/main.ts，幫你的套件內容有個統一引入和輸出的地方，如同目錄
|
1 2 3 |
import { aFunc } from "./aFunc.ts" export { aFunc } |
3. 根目錄下新增 vite.config.ts，跟輸出、開發相關的內容設定都在這邊
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import typescript from '@rollup/plugin-typescript' import path from 'path' import { typescriptPaths } from 'rollup-plugin-typescript-paths' import { defineConfig } from 'vite' export default defineConfig({ plugins: [], resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, './src'), }, ], }, server: { port: 3000, }, build: { manifest: true, minify: true, reportCompressedSize: true, lib: { entry: path.resolve(__dirname, 'src/main.ts'), fileName: 'main', formats: ['es', 'cjs'], }, rollupOptions: { plugins: [ typescriptPaths({ preserveExtensions: true, }), typescript({ sourceMap: false, declaration: true, outDir: 'dist', }), ], }, }, }) |
4. ESLint & Prettier
ESLint 搭配 Prettier 一同使用，可讓排版和閱讀上更為直覺。不過其設定檔的繁複程度也是數一數二的。以下為根目錄下各自的設定檔內容：
ESLINT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
module.exports = { root: true, env: { browser: true, es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:import/errors', 'plugin:import/warnings', 'prettier', ], overrides: [ { env: { node: true, }, files: ['.eslintrc.{js,cjs}'], parserOptions: { sourceType: 'script', }, }, ], parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, plugins: ['@typescript-eslint'], settings: { 'import/resolver': { node: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'], }, }, 'import/ignore': ['node_modules'], }, rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', singleQuote: true }, { usePrettierrc: true }, ], 'import/no-unresolved': [2, { ignore: ['^@/'] }], 'import/order': [ 'error', { groups: [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index'], alphabetize: { order: 'asc', caseInsensitive: true }, }, ], }, } |
Prettier
|
1 2 3 4 5 6 7 8 9 |
module.exports = { semi: false, tabWidth: 2, printWidth: 100, singleQuote: true, trailingComma: 'all', jsxSingleQuote: false, bracketSpacing: true, } |
Prettier Ignore
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.local .output.js /dist/* /public/* /build/* **/*.svg **/*.sh README.md /node_modules/** pnpm-lock.yaml |
5. Jest
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
module.exports = { moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1', }, moduleFileExtensions: ['js', 'ts'], preset: 'ts-jest', testEnvironment: 'jsdom', testEnvironmentOptions: { customExportConditions: ['node', 'node-addons'], }, transformIgnorePatterns: [], testMatch: ['**/*.test.(js|ts)'], testResultsProcessor: './node_modules/jest-html-reporter', } |
調整項目
綜合以上需求，調整你的 package.json 內容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
{ "name": "套件名稱", "version": "版本號", "type": "module", "description": "套件描述", "repository": { "type": "git", "url": "Git 儲存位置" }, "exports": { ".": { "import": "./dist/main.js", "require": "./dist/main.cjs.js" } }, "main": "./dist/main.cjs.js", "module": "./dist/main.js", "typings": "./dist/main.d.ts", "files": [ "dist" // 當你執行 build 後，會生成的資料夾。 ], "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "test": "jest", "lint": "pnpm run eslint && pnpm run prettier", "prettier": "prettier --write .", "eslint": "eslint \"./**/*.{ts,tsx,js,jsx,d.ts}\" --fix" }, "devDependencies": { "@rollup/plugin-typescript": "^11.1.5", "@types/jest": "^29.5.10", "@types/node": "^20.10.0", "@typescript-eslint/eslint-plugin": "^6.12.0", "@typescript-eslint/parser": "^6.12.0", "eslint": "^8.54.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-import": "^2.29.0", "eslint-plugin-prettier": "^5.0.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jest-html-reporter": "^3.10.2", "prettier": "^3.1.0", "rollup-plugin-typescript-paths": "^1.4.0", "ts-jest": "^29.1.1", "tslib": "^2.6.2", "typescript": "^5.2.2", "vite": "^5.0.0" }, "keywords": [ "package keyword A", "package keyword B" ] } |
按讚加入粉絲團
