如何编译和观看 *两个 * Typescript 包，一个依赖于另一个？答案

【问题标题】：How to compile and watch *two* Typescript packages, one that depends on the other?如何编译和观看 *两个 * Typescript 包，一个依赖于另一个？
【发布时间】：2018-01-09 23:34:25
【问题描述】：

我正在src/ 下开发一个 Typescript 库，并在examples/ 下开发示例。目录结构是这样的：

examples/
    package.json
    exampleFiles.ts
src/
    index.ts
package.json

我可以使用 these instructions 编译库，但我不确定如何同时查看两个项目，尤其是当一个项目依赖于另一个项目时。

examples/package.json 看起来像这样：

{
  "dependencies": {
    "my-project": "file:..",
  }
}

即，我正在使用 file: 依赖项，这样我就不必一直将库发布到 npm 并重新安装它。我希望这会有所帮助。

如何设置它以便于开发？

【问题讨论】：

标签： typescript npm watch

【解决方案1】：

您需要从 src 包生成 DTS 文件，并将其提供给示例包。一种方法是在每个包中创建一个 tsconfig.json。

【讨论】：

【解决方案2】：

这有点复杂，但这似乎有效：

package.json

{
  "name": "my-lib",
  "version": "0.3.0",
  "types": "src/index.ts", <-- important
  ...
}

examples/package.json

{
  "dependencies": {
    "react": "^15.6.1",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "@types/react": "^16.0.0",
    "@types/react-dom": "^15.5.1",
    "awesome-typescript-loader": "^3.2.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

examples/webpack.config.babel.js

import {ProvidePlugin} from 'webpack';
import {CheckerPlugin, TsConfigPathsPlugin} from 'awesome-typescript-loader';

export default {
    context: `${__dirname}/src`,
    entry: './index.tsx',
    output: {
        path: `${__dirname}/src`,
        filename: 'bundle.js',
        publicPath: '/',
        pathinfo: true,
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/, 
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.(jpe?g|png|gif)($|\?)/i,
                // include: __dirname,
                loader: 'url-loader',
                options: {
                    limit: 1024 * 2,
                }
            },
        ]
    },
    target: 'web',
    resolve: {
        modules: ['node_modules'],
        extensions: ['.tsx', '.ts', '.jsx', '.js'],
        plugins: [
            new TsConfigPathsPlugin()
        ],
    },
    devtool: 'cheap-module-eval-source-map',
    plugins: [
        new ProvidePlugin({
            React: 'react',
        }),
        new CheckerPlugin(),
    ]
};

examples/.babelrc

只允许我们在webpack.config.babel.js 中使用import。

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

示例/tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "importHelpers": false,
    "removeComments": false,
    "preserveConstEnums": false,
    "sourceMap": true,
    "inlineSources": true,
    "noEmitOnError": false,
    "pretty": true,
    "outDir": "dist",
    "target": "es2017",
    "downlevelIteration": false,
    "lib": [
      "esnext",
      "dom"
    ],
    "moduleResolution": "node",
    "declaration": true,
    "module": "ESNext",
    "types": [
      "node"
    ],
    "baseUrl": ".", <-- needed
    "paths": {
      "my-lib": [
        ".."  <-- allows us to `import 'my-lib'` without having to publish it to npm first
      ]
    },
    "jsx": "React",
    "allowSyntheticDefaultImports": true
  },
  "files": [
    "src/index.tsx"
  ]
}

示例/Makefile

我喜欢使用 Make 而不是 npm 脚本。

# these are not files
.PHONY: all clean

# disable default suffixes
.SUFFIXES:

all: yarn.lock
    npx webpack-dev-server --hot --inline --colors --port 3123 --content-base src

yarn.lock:: package.json
    @yarn install --production=false
    @touch -mr $@ $<

yarn.lock:: node_modules
    @yarn install --production=false --check-files
    @touch -mr $@ $<

node_modules .deps:
    mkdir -p $@

clean:
    rm -rf node_modules dist

跑步

有了所有这些，您应该可以将cd 放入示例目录并运行make。它会启动 webpack-dev-server，观察你的文件并自动重新加载。

React 组件热加载还有一些工作要做。

【讨论】：