Hello, developer community!
Today, I’m going to walk you through the steps to set up a JavaScript library from scratch, including configuring commit linting, Husky, and semantic release for smooth development and release processes. Let’s dive into it!
Demo
mkdir new-project cd new-project
git init
echo "node_modules" > .gitignore
npm init -y
Make sure to add "type": "module" to your package.json to enable ES6 modules.
npm install --save-dev @commitlint/{cli,config-conventional} echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
npm install --save-dev husky npx husky init rm .husky/pre-commit echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
npx commitlint --from HEAD~1 --to HEAD --verbose
git add . git commit -m "foo: this will fail" # This commit should fail git commit -m "chore: this will pass" # This commit should pass
npm install --save-dev semantic-release npm install @semantic-release/git @semantic-release/changelog -D
Create the necessary directories and file for semantic-release:
mkdir .github mkdir .github/workflows/ touch .github/workflows/release.yml
Tag the latest commit and push it to the repository:
git log # Copy the GUID of the latest commit git tag v0.0.0 <COMMIT_GUID> git tag --contains <COMMIT_GUID> git push origin tag v0.0.0
Create a new NPM token and add it to your repository secrets.
Install and configure Commitizen for consistent commit messages:
npm install commitizen -g commitizen init cz-conventional-changelog --save-dev --save-exact
Install additional development tools like TypeScript, Jest, and Rollup:
npm install --save-dev typescript @types/node jest ts-jest @types/jest npm install --save-dev rollup @rollup/plugin-typescript @rollup/plugin-terser npm install --save-dev rollup-plugin-dts
Create the Rollup configuration file (rollup.config.js):
import terser from '@rollup/plugin-terser'; import typescript from '@rollup/plugin-typescript'; import dts from 'rollup-plugin-dts'; export default [ { input: 'src/index.ts', plugins: [ typescript({ tsconfig: './tsconfig.json', declaration: false, declarationDir: null, }), terser() ], output: [ { file: 'dist/index.mjs', format: 'esm', }, { file: 'dist/index.cjs', format: 'cjs', exports: 'named', }, ] }, { input: 'src/index.ts', plugins: [dts()], output: { file: 'dist/index.d.ts', format: 'es', }, } ];
And that’s it! You now have a fully configured project ready for developing and publishing your JavaScript library. If you have any questions or need further assistance, feel free to ask. Happy coding! ?
Best regards!
위 내용은 NPM 패키지 생성 - 단계별의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!