使用typescript开发angular模块并发布npm包


Posted in Javascript onApril 19, 2018

本文介绍了使用typescript开发angular模块并发布npm包,分享给大家,具体如下:

创建模块

初始化package.json文件

执行命名

npm init -y

会自动生成package.json文件如下,name默认为文件夹名称

{
 "name": "MZC-Ng-Api",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

在此基础上可以设置默认生成值

npm config set init-author-name "yiershan"       # 你的名称
npm config set init-author-email "511176294@qq.com" # 你的邮箱
npm config set init-author-url "https://www.jianshu.com/u/8afb7e623b70" # 你的个人网页
npm config set init-license "MIT"          # 开源授权协议名
npm config set init-version "0.0.1"             # 版本号

删掉重新来一遍

{
 "name": "MZC-Ng-Api",
 "version": "0.0.1",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "yiershan <511176294@qq.com> (https://www.jianshu.com/u/8afb7e623b70)",
 "license": "MIT"
}

然后添加一个 README.md 文件

简单介绍下项目

# MZC-Ng-Api

这是一个npm包发布测试项目

## License

请查看 [MIT license](./LICENSE).

添加一个开源协议文件

做事情还是要做的有鼻子有眼的嘛。

MIT License

Copyright (c) 2017 MZC

本项目为测试项目,完全免费。

添加源码

创建一个src目录并添加一个Index.ts文件

export class MzcNgApi{
  private name: string;
  constructor() {
    this.name = "MzcNgApi";
  }
}

创建一个Index.ts文件

export * from './src/index'

使用typescript编译

没有安装typescript就先安装

npm i -g typescript

初始化tsconfig.json文件

tsc --init

自动生成文件,很全很强大,还有解释

{
 "compilerOptions": {
  /* Basic Options */
  "target": "es5",             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
  "module": "commonjs",           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
  // "lib": [],               /* Specify library files to be included in the compilation. */
  // "allowJs": true,            /* Allow javascript files to be compiled. */
  // "checkJs": true,            /* Report errors in .js files. */
  // "jsx": "preserve",           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
  //"declaration": true,          /* Generates corresponding '.d.ts' file. */
  // "sourceMap": true,           /* Generates corresponding '.map' file. */
  // "outFile": "./",            /* Concatenate and emit output to single file. */
  // "outDir": "dist",            /* Redirect output structure to the directory. */
  // "rootDir": "./",            /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
  // "removeComments": true,        /* Do not emit comments to output. */
  // "noEmit": true,            /* Do not emit outputs. */
  // "importHelpers": true,         /* Import emit helpers from 'tslib'. */
  // "downlevelIteration": true,      /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
  // "isolatedModules": true,        /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

  /* Strict Type-Checking Options */
  "strict": true,              /* Enable all strict type-checking options. */
  // "noImplicitAny": true,         /* Raise error on expressions and declarations with an implied 'any' type. */
  // "strictNullChecks": true,       /* Enable strict null checks. */
  // "strictFunctionTypes": true,      /* Enable strict checking of function types. */
  // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
  // "noImplicitThis": true,        /* Raise error on 'this' expressions with an implied 'any' type. */
  // "alwaysStrict": true,         /* Parse in strict mode and emit "use strict" for each source file. */

  /* Additional Checks */
  // "noUnusedLocals": true,        /* Report errors on unused locals. */
  // "noUnusedParameters": true,      /* Report errors on unused parameters. */
  // "noImplicitReturns": true,       /* Report error when not all code paths in function return a value. */
  // "noFallthroughCasesInSwitch": true,  /* Report errors for fallthrough cases in switch statement. */

  /* Module Resolution Options */
  // "moduleResolution": "node",      /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
  // "baseUrl": "./",            /* Base directory to resolve non-absolute module names. */
  // "paths": {},              /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
  // "rootDirs": [],            /* List of root folders whose combined content represents the structure of the project at runtime. */
  // "typeRoots": [],            /* List of folders to include type definitions from. */
  // "types": [],              /* Type declaration files to be included in compilation. */
  // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
  "esModuleInterop": true          /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  // "preserveSymlinks": true,       /* Do not resolve the real path of symlinks. */

  /* Source Map Options */
  // "sourceRoot": "./",          /* Specify the location where debugger should locate TypeScript files instead of source locations. */
  // "mapRoot": "./",            /* Specify the location where debugger should locate map files instead of generated locations. */
  // "inlineSourceMap": true,        /* Emit a single file with source maps instead of having a separate file. */
  // "inlineSources": true,         /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

  /* Experimental Options */
  // "experimentalDecorators": true,    /* Enables experimental support for ES7 decorators. */
  // "emitDecoratorMetadata": true,     /* Enables experimental support for emitting type metadata for decorators. */
 }
}

编译

tsc -p .

编译成功会生成了js文件

使用typescript开发angular模块并发布npm包

发布

虽然什么都没有,但是什么都有了。

修改package.json文件

{
 "name": "mzc-ng-api", // 这个名字要小写且不能重复,有大写字母会报错
 "version": "1.0.2",
 "description": "个人博客系统,从后台api取数据的angular封装",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/yiershan/MZC-Ng-Api.git"
 },
 "keywords": [],
 "author": "yiershan <511176294@qq.com> (https://www.jianshu.com/u/8afb7e623b70)",
 "license": "MIT",
 "bugs": {
  "url": "https://github.com/yiershan/MZC-Ng-Api/issues"
 },
 "homepage": "https://github.com/yiershan/MZC-Ng-Api#readme"
}

修正下载源

npm config set registry https://registry.npmjs.org/

登录

npm login

如果没有账号就去注册一个吧

发布

npm publish

发布完成立即生效,去npm就能查到并可以下载

使用typescript开发angular模块并发布npm包

使用

新建一个项目安装包

npm i mzc-ng-api

发现很多东西都发布上去了。

使用typescript开发angular模块并发布npm包

而且在开发工作没有智能提示。

完善优化

编译时生成头文件,*.d.ts。

解决编译器提示功能

在tsconfig.json种设置

"declaration": true,

使用typescript开发angular模块并发布npm包

关于tsconfig.json的更多配置可以好好研究研究

指定发布文件

修改

{
 "name": "mzc-ng-api",
 "version": "1.0.2",
 "description": "个人博客系统,从后台api取数据的angular封装",
 "main": "index.js",
 "types": "./index.d.ts", // 添加这个
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "files": [ // 指定发布文件
  "index.js",
  "index.d.ts",
  "src/*.js",
  "src/*.d.ts",
  "src/**/*.js",
  "src/**/*.d.ts",
  "README.md",
  "LICENSE",
  "package.json"
 ],
 "repository": {
  "type": "git",
  "url": "git+https://github.com/yiershan/MZC-Ng-Api.git"
 },
 "keywords": [],
 "author": "yiershan <511176294@qq.com> (https://www.jianshu.com/u/8afb7e623b70)",
 "license": "MIT",
 "bugs": {
  "url": "https://github.com/yiershan/MZC-Ng-Api/issues"
 },
 "homepage": "https://github.com/yiershan/MZC-Ng-Api#readme"
}

更新版本

npm version prepatch

更多操作

# 版本号从 1.2.3 变成 1.2.4-0,就是 1.2.4 版本的第一个预发布版本。
npm version prepatch

# 版本号从 1.2.4-0 变成 1.3.0-0,就是 1.3.0 版本的第一个预发布版本。
npm version preminor

# 版本号从 1.2.3 变成 2.0.0-0,就是 2.0.0 版本的第一个预发布版本。
npm version premajor

# 版本号从 2.0.0-0 变成 2.0.0-1,就是使预发布版本号加一。
npm version prerelease
更新

npm publish

下载下来看看就好多了

使用typescript开发angular模块并发布npm包

封装些脚本。

可以根据自己需求编写更多快捷脚本

"scripts": {
  "build": "tsc -p .",
  "b":"npm run build",
  "version": "npm version prerelease",
  "v":"mpm run v",
  "publish": "npm run b && npm publish",
  "p":"npm run publish"
 },

至此基本的流程算是走通了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的细节分析
Jun 30 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
javascript去除空格方法小结
May 21 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
Angular 封装并发布组件的方法示例
Apr 19 #Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
一个基于react的图片裁剪组件示例
Apr 18 #Javascript
You might like
php使用google地图应用实例
2014/12/31 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
JS类的封装及实现代码
2009/12/02 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Django操作session 的方法
2020/03/09 Python
Django框架models使用group by详解
2020/03/11 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
简历的自我评价范文
2014/02/04 职场文书
安全生产先进个人材料
2014/02/06 职场文书
办公室副主任职责范本
2014/03/08 职场文书
社团活动总结书
2014/06/27 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
公司联欢会主持词
2015/07/04 职场文书
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python