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

相关文章
|
3月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
549 1
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
35 0
|
3月前
|
消息中间件 JavaScript 中间件
函数计算产品使用问题之WebIDE编写的Node.js代码是否会自动进行打包部署
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
217 3
|
1月前
|
JavaScript 中间件 Shell
Node.js JXcore 打包
10月更文挑战第8天
33 1
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
85 2
前端JS读取文件内容并展示到页面上
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
153 10
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
1月前
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
239 0

推荐镜像

更多