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

Question

我最近开始使用typescript,无法理解如何构建一个使用webpack在另一个打字稿模块中使用的打字稿库.

此库也适用于在浏览器中运行.

目前我最终得到了以下结构和构建输出:

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捆绑
• 每个文件的typescript声明

问题是:

• 如何通过另一个浏览器应用程序中的bower导入/使用此库(它也将使用带有webpack的typescript)？
• 在使用此库的应用程序中使用哪种导入语法(例如import .. from或require)？
• 也许我不应该使用webpack来捆绑库？

更新:使用NPM管理打字稿模块之间的本地依赖关系,无需像@basarat建议的bower,一切正常

Answer 1

也许我不应该使用webpack来捆绑库

这是我的建议.将捆绑保留到顶级应用程序使用者.

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

更多

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