捆绑和使用 webpack 构建的 typescript 库的正确方法？答案

【问题标题】：Proper way to bundle and consume webpack-built typescript library?捆绑和使用 webpack 构建的 typescript 库的正确方法？
【发布时间】：2016-11-07 17:47:35
【问题描述】：

我最近开始使用 typescript，不明白如何使用 webpack 构建一个 typescript 库，该库将在另一个 typescript 模块中使用。

也是这个库，旨在在浏览器中运行。

目前我已经完成了以下结构和构建输出：

lib
├── build
│   ├── typings // tsc output with declaration:true
│   │   ├── Bar.d.ts
│   │   └── Foo.d.ts
│   └── lib.bundle.js //webpack bundle file
├── src
│   ├── Bar.ts
│   └── Foo.ts
├── bower.json
├── package.json
└── tconfig.json

webpack 配置：

webpackOptions = {
    resolve: { extensions: ['', '.ts'] },
    module: {
      loaders: [{ test: /\.ts$/, exclude: [/node_modules/,/out/,/.*\.d\.ts/],include:[/\.ts$/], loaders: ['ts-loader']}]
    },
    ts:{
      compilerOptions:compilerOptions
    },
    output: {
      library:"mylib",
      libraryTarget:'commonjs',
      filename: 'mylib.bundle.js'
    }
  }

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir":"out",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "typings/global",
    "build"
  ]
}

还有 Foo.ts 例如：

export class Foo{
    foo(){}
}

Bar.ts：

import {Foo} from './Foo'
export class Bar{
    public foo:Foo = new Foo();
}

所以我有以下构建输出：

webpack 包
每个文件的打字稿声明

问题是：

如何在另一个浏览器应用程序中通过 bower 导入/使用这个库（也将使用 typescript 和 webpack）？
在使用此库的应用程序中将使用哪种导入语法（例如 import .. from 或 require ）？
也许我根本不应该使用 webpack 来捆绑库？

更新： 使用 NPM 管理 typescript 模块之间的本地依赖项，如 @basarat 所建议的，没有凉亭，一切正常

【问题讨论】：

标签： typescript webpack

【解决方案1】：

也许我根本不应该使用 webpack 来打包库

这是我推荐的。将捆绑留给顶级应用程序使用者。

例如这里有一个模块 csx https://github.com/basarat/csx 你可以在 TypeScript 中使用。您可以看到它没有以任何特殊方式捆绑。它的只是一个节点模块。如果这个人想在浏览器中使用它捆绑在他们身上?

https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html

【讨论】：

我也打算只提供编译后的 .js 文件，并让应用程序开发人员弄清楚我的库应该如何捆绑到他们的应用程序中。
好的。当节点应用程序通过 NPM 使用库时，这是使用节点模块的方式。我应该怎么做才能在使用 Bower 的应用程序中使用 TS 库？我已经有一个现有的 TS 应用程序，其依赖项在 bower 和环境类型定义中管理。是否可以通过 NPM 导入库并通过 webpack/broserify 与应用程序捆绑？
看看young-programmer.life/2017/02/…

更多