初始化項(xiàng)目
首先在github創(chuàng)建一個(gè)倉(cāng)庫(kù)，協(xié)議選擇MIT，gitignore選擇Node，添加README.md描述文件。使用git clone將項(xiàng)目克隆到本地。cd 進(jìn)入目錄，使用vscode打開(kāi)（終端輸入code . 命令即可）。
然后創(chuàng)建一個(gè)合理的目錄結(jié)構(gòu)：
配置 typescript
{
"compilerOptions": {
"target": "ES5",
"outDir": "lib",
"lib": [
"DOM",
"ES2018"
],
"declaration": true,
"checkJs": false,
"noEmitOnError": true,
"emitDeclarationOnly": true,
"allowJs": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"importHelpers": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"pretty": true,
"jsx": "react-jsx",
"newLine": "lf",
"typeRoots": [
"./src/@types",
"./node_modules/@types"
]
},
"include": [
"src",
],
"exclude": [
"node_modules"
]
}統(tǒng)一代碼風(fēng)格
首先，配置eslint，使用遵循Airbnb推出的JavaScript風(fēng)格指南的eslint-config-airbnb，eslint-config-airbnb-typescript。
?其次，配置prettier，安裝依賴(lài)prettier，.prettierrc.js的推薦配置如下：
module.exports = {
// 一行最多 80 字符
printWidth: 80,
// 使用 2 個(gè)空格縮進(jìn)
tabWidth: 2,
// 不使用縮進(jìn)符，而使用空格
useTabs: false,
// 行尾需要有分號(hào)
semi: true,
// 使用單引號(hào)
singleQuote: true,
// 結(jié)尾處不加逗號(hào)
trailingComma: "none",
// 對(duì)象的 key 僅在必要時(shí)用引號(hào)
quoteProps: 'as-needed',
// jsx 不使用單引號(hào)，而使用雙引號(hào)
jsxSingleQuote: false,
// 大括號(hào)內(nèi)的首尾需要空格
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號(hào)需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)，只有一個(gè)參數(shù)的時(shí)候，也需要括號(hào)
arrowParens: 'always',
// 每個(gè)文件格式化的范圍是文件的全部?jī)?nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫(xiě)文件開(kāi)頭的 @prettier
requirePragma: false,
// 不需要自動(dòng)在文件開(kāi)頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// vue 文件中的 script 和 style 內(nèi)不用縮進(jìn)
vueIndentScriptAndStyle: false,
// 換行符使用 lf
endOfLine: 'lf',
};
最后，增加 git 提交校驗(yàn)，安裝依賴(lài)husky和lint-staged，其中，husky用于git 的hook，lint-staged用于針對(duì)暫存的 git 文件運(yùn)行 linters。
在package.json中配置安裝 husky 的命令，以及l(fā)int-staged檢查：
執(zhí)行npm run prepare 安裝 husky，并在生成的.husky/pre-commit文件（如果沒(méi)有生成，手動(dòng)創(chuàng)建一個(gè)即可）中添加 npx lint-staged 命令：
All ready！執(zhí)行g(shù)it commit 提交代碼就會(huì)觸發(fā) prettier和eslint自動(dòng)修復(fù)。
配置babel
module.exports = {
env: {
test: {
presets: [
'@babel/preset-env'
]
},
build: {
presets: [
[
'@babel/preset-env',
{
// rollupjs 會(huì)處理模塊，所以設(shè)置成 false
modules: false,
loose: true
}
]
]
}
}
}配置rollup
如果開(kāi)發(fā)的是工具包，rollup更適合作為打包工具，如果是組件，比如vue組件，則@vue/cli 的 lib 模式更適合。根據(jù)開(kāi)發(fā)環(huán)境區(qū)分不同的配置并在package.json的script中添加腳本命令，輸出不同規(guī)范的產(chǎn)物：umd、umd.min、cjs、esm。
通用配置rollup.config.base.js
import { nodeResolve } from '@rollup/plugin-node-resolve'; // 解析 node_modules 中的模塊
import commonjs from '@rollup/plugin-commonjs'; // cjs => esm
import alias from '@rollup/plugin-alias'; // alias 和 resolve 功能
import replace from '@rollup/plugin-replace';
import eslint from '@rollup/plugin-eslint';
import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import clear from 'rollup-plugin-clear';
import typescript from '@rollup/plugin-typescript';
import json from '@rollup/plugin-json'; // 支持在源碼中直接引入json文件，不影響下面的
import { name as pkgName, version, author } from '../package.json';
const banner = '/*!\n'
+ ` * ${pkgName} v${version}\n`
+ ` * (c) 2023-${new Date().getFullYear()} ${author}\n`
+ ' * Released under the MIT License.\n'
+ ' */';
export default {
input: 'src/index.ts',
// 同時(shí)打包多種規(guī)范的產(chǎn)物
output: [
{
file: `lib/${pkgName}.umd.js`,
format: 'umd',
name: pkgName,
banner
},
{
file: `lib/${pkgName}.umd.min.js`,
format: 'umd',
name: pkgName,
banner,
plugins: [terser()]
},
{
file: `lib/${pkgName}.cjs.js`,
format: 'cjs',
name: pkgName,
banner
},
{
file: `lib/${pkgName}.esm.js`,
format: 'es',
banner
}
],
// 注意 plugin 的使用順序
plugins: [
json(),
clear({
targets: ['lib']
}),
alias(),
replace({
'process.env.NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development'
),
preventAssignment: true
}),
nodeResolve(),
commonjs({
include: 'node_modules/**'
}),
typescript(),
eslint({
throwOnError: true, // 拋出異常并阻止打包
include: ['src/**'],
exclude: ['node_modules/**']
}),
babel({ babelHelpers: 'bundled' })
]
};
開(kāi)發(fā)環(huán)境配置rollup.config.dev.js
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import baseConfig from './rollup.config.base';
export default {
...baseConfig,
plugins: [
...baseConfig.plugins,
livereload({
watch: 'examples/browser'
}),
serve({
port: 8080,
contentBase: ['lib', 'examples/browser'],
openPage: 'index.html'
})
]
};
正式環(huán)境配置rollup.config.prod.js
import filesize from 'rollup-plugin-filesize';
import baseConfig from './rollup.config.base';
export default {
...baseConfig,
plugins: [...baseConfig.plugins, filesize()]
};
?添加開(kāi)發(fā)與打包相關(guān)的腳本命令到package.json，借助npm-run-all 依賴(lài)，npm run build按順序執(zhí)行z，buildjs，buildts。
添加支持tree shaking 的配置到package.json中。
發(fā)布到npm
編寫(xiě)發(fā)布到npm時(shí)需要忽略的文件與目錄的配置，即.npmignore。
# OSX
.DS_Store
# IDE
.idea
# npm
node_modules
# jest
coverage
# dev
bin
src
scripts
test
.babelrc.js
.eslintrc.js
.eslintignore
.prettierrc.js
.prettierignore
tsconfig.json
#doc
docs
examples
#other
.github
.husky添加發(fā)布相關(guān)的腳本命令到package.json中，其中 npm --no-git-tag-version version 分別修改版本號(hào)中的major，minor，patch。
然后登錄npm官網(wǎng)（npm login --registry https://registry.npmjs.org/），登錄成功后，直接發(fā)布即可（npm publish --registry https://registry.npmjs.org/）。
發(fā)布過(guò)程中常見(jiàn)的報(bào)錯(cuò)：
? ? ? ? 1. 400：版本問(wèn)題，修改package.json的version即可；
? ? ? ? 2. 401：npm源設(shè)置成第三方源（淘寶源）的時(shí)候發(fā)生的，比如我們經(jīng)常會(huì)將鏡像源設(shè)置成淘寶源。因此在發(fā)布時(shí)，應(yīng)該使用默認(rèn)的npm源登錄，即npm login --registry https://registry.npmjs.org/；
? ? ? ? 3. 403：包名重復(fù)，修改包名重新發(fā)布。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-453857.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-453857.html
到了這里，關(guān)于前端工程化：發(fā)布一個(gè)屬于自己的規(guī)范 npm 包的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
