Sometimes I may need to share some of my logic\algorithm with other developers. In this case I might need to build a library.
That library might be used in the customer's browser, or might be referenced by other front-end projects, may be based on Angular or React.
So how can we build a package with TypeScript that benefits from strong type while can be installed\reference\used by others?
Full example after all those steps that you can download directly: Download zip
Manual steps
After creating a new folder, do some initialization commands:
$ git init
$ npm init
Strongly suggest pushing that repo to GitHub and assign a license first.
$ git add . && git commit -m "Init project" && git remote add origin https://github.com/your-name && git push -u origin main
Create a .gitignore file to ignore those dependencies:
node_modules
dist
Then we gonna install some packages for building the project.
$ npm install --save-dev terser-webpack-plugin ts-loader typescript webpack webpack-cli
After installing, you package.json file might be looking like this:
{
"name": "my-project", // name your project.
"version": "1.0.0",
"description": "my project",
"scripts": {
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/myname/myrepo"
},
"keywords": [
"disable-with"
],
"author": "anduin@aiursoft.com",
"license": "MIT",
"homepage": "https://github.com/Anduin2017/jquery-disable-with#readme",
"devDependencies": {
"terser-webpack-plugin": "^5.1.2",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"webpack": "^5.38.0",
"webpack-cli": "^4.7.0"
}
}
Since we are building a TypeScript project, create a new file name: tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
],
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
Now your repo might be looking like this:
Now, create a new folder name src
. And you can put your entry in it.
Put a new file with .ts extension under the src folder.
Now you can start building your new library. Of course, you can add multiple typescript files and import them each other.
Sample class:
class DisableWith {
constructor(property: string) {
this.initDisableWith(property);
}
initDisableWith(property: string): void {
document.querySelectorAll(`*[${property}]`).forEach(element => {
let value = element.getAttribute(property);
alert(value);
});
}
}
export default DisableWith;
Do export your class as default!
After that, creating a new file named: webpack.config.js in the root folder of the repo.
Modify the content to make it buildable.
Only in production mode, will it call terser plugin to optimize the package. And in normal mode shall it load your ts
file from the entry and package it with umd config.
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const production = process.env.NODE_ENV === 'production' || false;
module.exports = {
entry: ['./src/jquery-disable-with.ts'], // <- Modify it to your entry name.
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js']
},
mode: 'production',
output: {
filename: production ? 'jquery-disable-with.min.js' : 'jquery-disable-with.js',
path: path.resolve(__dirname, 'dist'),
globalObject: 'this',
library: 'DisableWith',
libraryExport: 'default',
libraryTarget: 'umd'
},
optimization: {
minimize: production,
minimizer: [
new TerserPlugin({})
]
}
};
Finally, don't forget to modify your package.json
file to specify the entry.
Add this:
"main": "dist/jquery-disable-with.js"
Now you can try to build your project with command:
$ npm run build
$ npm run build --production
Hopefully, you can see there gonna be new generated file located in your dist
folder.
You can now try to build a sample here. Just reference your file in your dist folder.
Finally, we gonna publish this project to npm.
AzureAD+AnduinXue@Aiursoft-SS MINGW64 ~/source/repos/Anduin2017/jquery-disable-with (master)
$ npm login
npm notice Log in on https://registry.npmjs.org/
Username: anduin2017
Password: ******************************
Email: (this IS public) anduin@aiursoft.com
Enter one-time password from your authenticator app: 233333
Logged in as anduin2017 on https://registry.npmjs.org/.
$ npm publish
npm notice
npm notice package: jquery-disable-with@2.2.3
npm notice === Tarball Contents ===
npm notice 1.1kB LICENSE
npm notice 1.6kB README.md
npm notice 126B build.sh
npm notice 2.7kB dist/jquery-disable-with.js
npm notice 1.0kB dist/jquery-disable-with.min.js
npm notice 396B example.html
npm notice 709B package.json
npm notice 1.9kB src/jquery-disable-with.ts
npm notice 464B tsconfig.json
npm notice 887B webpack.config.js
npm notice === Tarball Details ===
npm notice name: jquery-disable-with
npm notice version: 2.2.3
npm notice filename: jquery-disable-with-2.2.3.tgz
npm notice package size: 4.0 kB
npm notice unpacked size: 11.0 kB
npm notice shasum: asdfasdfasdfasdfasdfasdfadfasf
npm notice integrity: sha512-asdfasdfasdfasdf==
npm notice total files: 10
And your customers can install your project via:
$ npm install --save your-package
<script src="node_modules/jquery-disable-with/dist/jquery-disable-with.js"></script>
Or he can import it after installing:
import DisableWith from 'jquery-disable-with';
new DisableWith('data-disable-with');
666
666
666 npm cli可以支持直接从git repo上下载npm包(https://docs.npmjs.com/cli/v7/commands/npm-install),使用 npm install <git-host>:<git-user>/<repo-name> 下载依赖。 考虑到npm发包到regsitry时经常遇到重名,还需要想一下名字😂,这也是个不错的方式。