将Typescript 2.3模块发布到Angular 4消耗的NPM [英] Publishing Typescript 2.3 Modules to NPM for Angular 4 Consumption

问题描述

在Typescript中编写NPM模块有相关说明 ，但是它已经过时了，现在有很多不同的答案可能对Angular也可能不起作用. Jason Aden在 youtube 上也做了非常好的演讲发布Angular Components，但在这种情况下，我只对发布普通打字稿类感兴趣.

There are related instructions in Writing NPM modules in Typescript , however it's dated and there are now a lot of different answers which may or may not work for Angular. There's also a very good presentation by Jason Aden on youtube on how to publish Angular Components, but in this case I'm only interested in publishing vanilla typescript classes.

推荐答案

我完成了一个用于测试的原型.我使用了本文中的代码-创建编写的npm模块 Jason Aden的包装角度演示中的汇总建议 a>.

I finished a prototype for testing this out. I used code from 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工作流程.

Note that the tsconfig-cjs.json part of this is there so that in addition to supporting webpack and Angular, we also support commonjs + es5 workflows.

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创建打字稿编译器设置

# 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);

摘要

• 由汇总生成的FESM(平面EcmaScript模块)通过package.json's module属性公开.
生成
• Typescript声明文件，并将其放置在目录中，并通过package.json's types属性公开.
通过package.json's main属性启用
• CommonJS模块支持.

Summary

• The FESM (Flat EcmaScript module) produced by rollup is exposed via package.json's module attribute.
• Typescript declaration files are produced and placed in the target/main/esm directory and exposed via package.json's types attribute.
• CommonJS module support is enabled via package.json's main attribute.

这篇关于将Typescript 2.3模块发布到Angular 4消耗的NPM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！