Javascript 将Typescript 2.3模块发布到NPM以供角度4使用

中有相关的说明，但是它是过时的，现在有很多不同的答案，可能对你有用，也可能不有用。Jason Aden在如何发布Angular组件方面也做了一个非常好的演示，但在本例中，我只对发布普通的typescript类感兴趣。

我完成了一个原型来测试这一点。我使用了来自的代码和来自的汇总建议

请注意，这里有

tsconfig cjs.json

部分，因此除了支持webpack和Angular外，我们还支持commonjs+es5工作流

Github存储库

台阶 项目设置 初始化项目（TS模块生产者）

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

替换

package.json

： 下载依赖项 为es6和commonjs创建typescript编译器设置 创建类型脚本测试导出： 编撰 创建一个消费者项目 创建模块使用者 在

index.ts

中，尝试以下操作：

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

总结

• rollup生成的FESM（平面EcmaScript模块）通过

  package.json的module

  属性公开
• Typescript声明文件被生成并放置在

  target/main/esm

  目录中，并通过

  package.json的types

  属性公开
• CommonJS模块支持通过

  package.json的main

  属性启用

  ---

请注意，Parcel可能是比rollup now更好的选择，因为它还支持树抖动的commonjs模块。

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


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

# 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

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