使用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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
深入理解Promise.all
Aug 08 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php 读取文件乱码问题
2010/02/20 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Display SQL Server Version Information
2007/06/21 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python服务器与android客户端socket通信实例
2014/11/12 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python之mock模块基本使用方法详解
2019/06/27 Python
pow在python中的含义及用法
2019/07/11 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
教师廉洁自律承诺书
2014/05/26 职场文书
物资采购方案
2014/06/12 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python