javascript - Angular 4 Tüketimi İçin Typescript 2.3 Modüllerini NPM'e Yayınlama

Typescript ile NPM modülleri yazma konusunda ilgili talimatlar var, ancak bunlar eskimiş ve şimdi Angular için işe yarayıp yaramayacak birçok farklı cevap var. Ayrıca Jason Aden tarafından YouTube'da Angular Bileşenlerini nasıl yayınlayacağınız hakkında çok iyi bir sunum var, ancak bu durumda ben sadece saf typescript sınıflarını yayınlamakla ilgileniyorum.

Cevap #1

Bunu test etmek için bir prototip tamamladım. TypeScript ile yazılmış npm modülleri oluşturmayı anlatan bu makaleden ve Jason Aden'in Packaging Angular Sunumu'ndaki rollup önerisinden kod kullandım.

Bunun tsconfig-cjs.json bölümü, sadece webpack ve Angular'ı desteklemenin yanı sıra commonjs + es5 iş akışlarını da desteklememiz için olduğunu unutmayın.

Github Deposu

TS Modül Üretici Projesi

Adımlar

Proje Kurulumu

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

package.json'i değiştir:

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

Bağımlılıkları indir

npm i
npm i -g rollup
npm i -g typescript    


Make typescript source directory
mkdir -p src/main/ts

ES6 ve CommonJS için TypeScript derleyici ayarları oluştur

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

Typescript test exportları oluştur:

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';

Derle

npm run build-all

Bir tüketici projesi oluştur

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

Bir modül tüketicisi oluştur

touch index.ts

index.ts dosyasında aşağıdakileri deneyin:

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

Özet

• Rollup tarafından üretilen FESM (Düz EcmaScript modülü), package.json's module özniteliği aracılığıyla açığa çıkarılır.
• Typescript bildirim dosyaları üretilir ve target/main/esm dizinine yerleştirilir ve package.json'un types özniteliği aracılığıyla sunulur.
• CommonJS modül desteği, package.json's main özniteliği aracılığıyla etkinleştirilir.