更多

Question

我最近开始使用typescript，无法理解如何使用webpack构建一个将在另一个打字稿模块中使用的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 bundle
每个文件的typescript声明

问题是：

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

更新：使用NPM管理打字稿模块之间的本地依赖关系，无需按照@basarat的建议，一切正常

Answer 1

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

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

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

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

1 个答案:

更多