将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 消费
Publishing Typescript 2.3 Modules to NPM for Angular 4 Consumption
Writing NPM modules in Typescript中有相关说明
,但是它已经过时了,现在有很多不同的答案可能适用于 Angular,也可能不适用于 Angular。 Jason Aden 关于如何发布 Angular 组件的 youtube 也有一个非常好的演示,但在这种情况下,我只对发布 vanilla typescript 类.
感兴趣
我完成了一个原型来测试它。我使用了 this article - creating npm modules written in typescript and the rollup suggestion from Jason Aden's Packaging Angular Presentation.
中的代码
请注意,其中的 tsconfig-cjs.json
部分是为了除了支持 webpack 和 Angular,我们还支持 commonjs + es5 工作流。
Github 存储库
步骤
项目设置
初始化项目(TS Module Producer)
mkdir tsmproducer
cd tsmproducer
# Initialize the project's package.json
npm init -y
替换package.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 创建 typescript 编译器设置
# 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"
]
}
创建打字稿测试导出:
# src/main/ts/printSubtract.ts
export function printSubtract(...numbers: number[]) {
console.log(`Subtracting the numbers: ${numbers.join(', ')}`);
}
# src/main/ts/printAdd.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
创建消费者项目
mkdir tsmconsumer (TS Module Consumer)
cd tsmconsumer
npm init -y
npm i ../tsmproducer
创建模块消费者
touch index.ts
在 index.ts
中尝试以下操作:
import {printAdd, printSubtract} from 'tsmproducer';
printAdd(1, 2);
printSubtract(2, 1);
总结
- rollup 生成的 FESM(Flat EcmaScript 模块)通过
package.json's module
属性公开。
- Typescript 声明文件生成并放置在
target/main/esm
目录中,并通过 package.json's types
属性公开。
- 通过
package.json's main
属性启用 CommonJS 模块支持。
Writing NPM modules in Typescript中有相关说明 ,但是它已经过时了,现在有很多不同的答案可能适用于 Angular,也可能不适用于 Angular。 Jason Aden 关于如何发布 Angular 组件的 youtube 也有一个非常好的演示,但在这种情况下,我只对发布 vanilla typescript 类.
感兴趣我完成了一个原型来测试它。我使用了 this article - creating npm modules written in typescript and the rollup suggestion from Jason Aden's Packaging Angular Presentation.
中的代码请注意,其中的 tsconfig-cjs.json
部分是为了除了支持 webpack 和 Angular,我们还支持 commonjs + es5 工作流。
Github 存储库
步骤
项目设置
初始化项目(TS Module Producer)mkdir tsmproducer
cd tsmproducer
# Initialize the project's package.json
npm init -y
替换package.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 创建 typescript 编译器设置
# 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"
]
}
创建打字稿测试导出:
# src/main/ts/printSubtract.ts
export function printSubtract(...numbers: number[]) {
console.log(`Subtracting the numbers: ${numbers.join(', ')}`);
}
# src/main/ts/printAdd.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
创建消费者项目
mkdir tsmconsumer (TS Module Consumer)
cd tsmconsumer
npm init -y
npm i ../tsmproducer
创建模块消费者
touch index.ts
在 index.ts
中尝试以下操作:
import {printAdd, printSubtract} from 'tsmproducer';
printAdd(1, 2);
printSubtract(2, 1);
总结
- rollup 生成的 FESM(Flat EcmaScript 模块)通过
package.json's module
属性公开。 - Typescript 声明文件生成并放置在
target/main/esm
目录中,并通过package.json's types
属性公开。 - 通过
package.json's main
属性启用 CommonJS 模块支持。