将Typescript 2.3模块发布到NPM for Angular 4 Consumption

在Typescript中编写NPM模块有相关的说明，但是它的date和现在有很多不同的答案，可能会或可能不适用于angular4。 ，但在这种情况下，我只对发布香草打字稿感兴趣。

Answer 1

我完成了一个testing的原型。 我使用了这篇文章中的代码- 创build用typcript编写的npm模块，以及Jason Aden的Packaging Angular Presentation中的汇总build议。

请注意， tsconfig-cjs.json部分就是这样，除了支持webpack和Angular 4之外，我们还支持commonjs + es5工作stream。

Github存储库

TS模块生产者项目

脚步

项目设置

初始化项目（TS模块生产者）

 mkdir tsmproducer cd tsmproducer # Initialize the project's package.json npm init -y 

replacepackage.json ：

  { "name": "tsmproducer", "version": "1.0.0", "description": "Example typescript npm project supporting es6 modules via the module package.json attribute as well as commonjs", "main": "target/main/cjs/index.js", "types": "target/main/esm/index.d.ts", "module": "target/main/esm/fesm.js", "scripts": { "build-cjs": "rm -rf target/main/cjs && tsc -p tsconfig-cjs.json", "build-esm": "rm -rf target/main/esm && tsc -p tsconfig-esm.json && rollup target/main/esm/index.js -o target/main/esm/fesm.js", "build-all": "npm run build-cjs && npm run build-esm" }, "keywords": [ "typescript", "commonjs", "npm", "modules", "es6", "es2015", "publishing", "rollup", "treeshaking" ], "author": "Ole Ersoy", "license": "MIT", "devDependencies": { "rollup": "^0.41.6", "typescript": "^2.3.4" } } 

下载依赖关系

 npm i npm i -g rollup npm i -g typescript # Make typescript source directory mkdir -p src/main/ts 

为es6和commonjs创build打字稿编译器设置

 # tsconfig-esm.json { "compilerOptions": { "declaration": true, "module": "es2015", "target": "es5", "rootDir": "src/main/ts", "outDir": "target/main/esm" }, "exclude": [ "node_modules" ] } # tsconfig-cjs.json { "compilerOptions": { "module": "commonjs", "target": "es5", "rootDir": "src/main/ts", "outDir": "target/main/cjs" }, "exclude": [ "node_modules" ] } 

创build打字稿testing导出：

 # src/main/ts/printSubtract.ts export function printSubtract(...numbers: number[]) { console.log(`Subtracting the numbers: ${numbers.join(', ')}`); } # src/main/ts/printSubtract.ts export function printAdd(...numbers: number[]) { console.log(`Adding the numbers: ${numbers.join(', ')}`); } # src/main/ts/index.ts export * from './printAdd'; export * from './printSubtract'; 

编

 npm run build-all 

创build一个消费者项目

 mkdir tsmconsumer (TS Module Consumer) cd tsmconsumer npm init -y npm i ../tsmproducer 

创build一个模块使用者

 touch index.ts 

在index.ts尝试以下操作：

  import {printAdd, printSubtract} from 'tsmproducer'; printAdd(1, 2); printSubtract(2, 1); 

概要

• 由rollup生成的FESM（平面EcmaScript模块）通过package.json's module属性公开。
• Typescript声明文件被生成并放置在target/main/esm目录中，并通过package.json's types属性公开。
• CommonJS模块支持通过package.json's main属性启用。