将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 使用

Posted

技术标签:

【中文标题】将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 使用【英文标题】:Publishing Typescript 2.3 Modules to NPM for Angular 4 Consumption 【发布时间】:2017-10-25 04:38:56 【问题描述】:

Writing NPM modules in Typescript 中有相关说明,但是它已经过时了,现在有很多不同的答案可能适用于 Angular,也可能不适用于 Angular。 Jason Aden 在youtube 上也有关于如何发布 Angular 组件的非常好的演讲,但在这种情况下,我只对发布 vanilla typescript 类感兴趣。

【问题讨论】:

请注意 Parcel 现在可能是比 rollup 更好的选择,因为它还支持 tree shaking commonjs 模块。 【参考方案1】:

我完成了一个用于测试的原型。我使用了来自this article - creating npm modules written in typescript 的代码和来自Jason Aden's Packaging Angular Presentation 的汇总建议。

请注意,这里有 tsconfig-cjs.json 部分,因此除了支持 webpack 和 Angular 之外,我们还支持 commonjs + es5 工作流。

Github 存储库

TS Module Producer Project

步骤

项目设置

初始化项目(TS 模块生产者)
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 属性公开。 CommonJS 模块支持通过package.json's main 属性启用。

【讨论】:

以上是关于将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 使用的主要内容,如果未能解决你的问题,请参考以下文章

将定义添加到 Typescript 中的现有模块

将 sass/css 模块添加到 typescript react app

我可以将 TypeScript 类从我自己的模块导入到全局吗?

LayaBox---TypeScript---结构

typescript 将http拦截器添加到模块

如何将Kendo UI打字输入到TypeScript模块中