<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        使用typescript開發angular模塊并發布npm包

        來源:懂視網 責編:小采 時間:2020-11-27 22:16:29
        文檔

        使用typescript開發angular模塊并發布npm包

        使用typescript開發angular模塊并發布npm包:本文介紹了使用typescript開發angular模塊并發布npm包,分享給大家,具體如下: 創建模塊 初始化package.json文件 執行命名 npm init -y 會自動生成package.json文件如下,name默認為文件夾名稱 { name: MZC-Ng-Api, v
        推薦度:
        導讀使用typescript開發angular模塊并發布npm包:本文介紹了使用typescript開發angular模塊并發布npm包,分享給大家,具體如下: 創建模塊 初始化package.json文件 執行命名 npm init -y 會自動生成package.json文件如下,name默認為文件夾名稱 { name: MZC-Ng-Api, v

        本文介紹了使用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文件

        發布

        雖然什么都沒有,但是什么都有了。

        修改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就能查到并可以下載

        使用

        新建一個項目安裝包

        npm i mzc-ng-api

        發現很多東西都發布上去了。

        而且在開發工作沒有智能提示。

        完善優化

        編譯時生成頭文件,*.d.ts。

        解決編譯器提示功能

        在tsconfig.json種設置

        "declaration": true,

        關于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
        
        

        下載下來看看就好多了

        封裝些腳本。

        可以根據自己需求編寫更多快捷腳本

         "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"
         },

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

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        使用typescript開發angular模塊并發布npm包

        使用typescript開發angular模塊并發布npm包:本文介紹了使用typescript開發angular模塊并發布npm包,分享給大家,具體如下: 創建模塊 初始化package.json文件 執行命名 npm init -y 會自動生成package.json文件如下,name默認為文件夾名稱 { name: MZC-Ng-Api, v
        推薦度:
        標簽: 發布 模塊 并使用
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产大片91精品免费看3| 国内自产少妇自拍区免费| 亚洲色大成网站WWW久久九九 | 亚洲欧洲高清有无| 无码精品人妻一区二区三区免费看| 亚洲国产另类久久久精品黑人 | 国产在线精品观看免费观看| 亚洲第一黄色网址| fc2成年免费共享视频18| 亚洲区日韩精品中文字幕| 一级毛片**免费看试看20分钟| 免费一级毛片一级毛片aa| 国产成人综合亚洲绿色| 亚洲男女内射在线播放| 国产亚洲精品免费视频播放| 亚洲国产综合专区电影在线 | 添bbb免费观看高清视频| 亚洲国产成人VA在线观看| 国产一级婬片A视频免费观看| 亚洲国产女人aaa毛片在线| 免费黄色福利视频| 精品久久亚洲一级α| 1000部啪啪毛片免费看| 亚洲一卡2卡3卡4卡乱码 在线| 在线观看人成视频免费无遮挡| 久久国产精品亚洲综合| 91九色精品国产免费| 美女被暴羞羞免费视频| 亚洲福利视频导航| 夜夜爽免费888视频| 波霸在线精品视频免费观看| 亚洲精品中文字幕无乱码| 永久黄网站色视频免费直播| 美女网站在线观看视频免费的| 亚洲视频在线免费观看| 最近2019中文字幕免费看最新| 亚洲国产精品成人综合色在线婷婷| 大学生一级特黄的免费大片视频 | 亚洲国产高清视频在线观看| 日韩中文字幕在线免费观看| 国产午夜精品免费一区二区三区 |