NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)

简介: NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)

$ npm login
Username: dengzemiao
Password: 
Email: (this IS public) xxxx@163.com
npm notice Please check your email for a one-time password (OTP)
Enter one-time password from your authenticator app: 29006106
Logged in as dengzemiao on https://registry.npmjs.org/.
  • 检查线上是否存在将要提交的包名,如果有就换个,如果有就会出来信息,如果没有就会报错,说明包名可以用。
$ npm view 包名
  • 初始配置文件
$ npm init
$ npm init -y
// 测试属性
export const dzmName = 'dzm'
export const dzmAge = 18
// 测试方法
export function dzmFunc (name, age) {
  return `名字:${name},年龄:${age}`
}
  • 在新建一个 index.d.ts,也可以通过第三方插件 dts-gen 自动生成。


JS 库必须要提供类型声明文件,才能在 TS环境使用。


类型声明文件的主文件名与JS库文件的主文件名相同,后缀为 d.ts。比如库的文件名为 index.js,则类型声明文件名为 index.d.ts

// 声明测试属性
export const dzmName: string;
export const dzmAge: number;
// 声明测试方法
export function dzmFunc (name: string, age: number): string;

这样在 ts 文件中就会提示警告了,这里使用的 npm link 本地调试的。

且如果没有 d.ts 声明文件,会报错找不到声明文件

然后通过 Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀),打包压缩后,进入到 dist 文件夹中去发布

$ npm publish

e88cf544ca2973401610720a8ea282a4_456990cf9376fe7bc5d992a1e13b683d.png

后面就是正常的安装包使用,注意安装包时如果使用的是非官方镜像,可能会存在延迟,所以推荐官方镜像安装。

# 查看包最新信息
$ npm view dzmtest

相关文章
|
9天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
15 0
|
22天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
2月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
32 0
|
3月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
3月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
|
2月前
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
42 1
|
3天前
|
Rust JavaScript 安全
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
|
3天前
|
运维 JavaScript Java
Serverless 应用引擎产品使用之阿里云Serverless函数计算中,在Node.js环境中执行jar文件如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
9 0
|
19天前
|
JavaScript
【vue】vue2 导入外部js文件如何拿到方法的返回值
【vue】vue2 导入外部js文件如何拿到方法的返回值
11 1
|
2月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
63 0

推荐镜像

更多