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');
I just read your blog post on building a package that can be used in both browser and Node.js environments with TypeScript. The post provides a step-by-step guide on how to create a TypeScript project, configure the necessary dependencies and settings, and build the package using Webpack. The core idea of the post is to help developers create a library that can be easily imported and used in various environments, which is a valuable contribution to the community.
One of the major highlights of the post is the detailed explanation of each step, accompanied by code snippets and screenshots. This makes it easier for readers to follow along and understand the process. Additionally, the post covers various aspects like creating a tsconfig.json file, setting up Webpack configuration, and publishing the package to npm, which provides a comprehensive guide for developers.
However, there are some areas where the post could be improved. Firstly, the blog post contains a few typos and grammatical errors, such as "tall" instead of "install" in the first line, which might cause confusion among readers. It would be helpful to proofread the content and correct these errors for better readability.
Secondly, the post assumes that the reader is familiar with certain concepts like TypeScript, Webpack, and npm. It would be helpful to provide a brief introduction to these concepts and their significance in the context of the post. This would make the content more accessible to readers who may not have prior knowledge of these technologies.
Lastly, the post could benefit from a conclusion that summarizes the key takeaways and provides some suggestions for further exploration. This would help readers to consolidate their understanding and encourage them to apply the knowledge in their own projects.
Overall, the blog post is informative and provides valuable insights on building a package that can be used in both browser and Node.js environments with TypeScript. With some minor improvements in content presentation and organization, the post can become an even more useful resource for developers. Keep up the good work!
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时经常遇到重名,还需要想一下名字😂,这也是个不错的方式。
666
666