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!
- Create a new project directory:
mkdir new-project
cd new-project
- Initialize a Git repository:
git init
-
Create a
.gitignore
file to excludenode_modules
:
echo "node_modules" > .gitignore
- Initialize a new Node.js project:
npm init -y
Make sure to add "type": "module"
to your package.json
to enable ES6 modules.
-
Set up
commitlint
to enforce consistent commit messages:
npm install --save-dev @commitlint/{cli,config-conventional}
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
-
Configure
husky
to ensure commits followcommitlint
rules:
npm install --save-dev husky
npx husky init
rm .husky/pre-commit
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
-
Verify
commitlint
configuration:
npx commitlint --from HEAD~1 --to HEAD --verbose
- Perform some test commits to check the configuration:
git add .
git commit -m "foo: this will fail" # This commit should fail
git commit -m "chore: this will pass" # This commit should pass
-
Install and configure
semantic-release
for automated versioning and releases:
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!
Top comments (0)