使用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的朋友一点学习经验小结
Nov 23 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP的栏目导航程序
2006/10/09 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python实现BackPropagation算法
2017/12/14 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
学生自我鉴定模板
2013/12/30 职场文书
个人委托书格式
2014/04/04 职场文书
超市创业计划书
2014/04/24 职场文书
干部个人对照检查材料
2014/08/25 职场文书
教师节简报
2015/07/20 职场文书
导游词之上海豫园
2019/10/24 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android