如何编译和观看*两个* Typescript包,一个依赖于另一个?

时间:2017-08-02 16:13:33

标签: typescript npm watch

我正在开发src/下的Typescript库和examples/下的示例。目录结构是这样的:

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

我可以使用these instructions编译库,但我不确定如何同时观察这两个项目,尤其是当一个项目依赖另一个时。

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

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

即,我正在使用file:依赖项,因此我不必继续将该库发布到npm并重新安装它。我希望这会有所帮助。

如何设置它以便于开发?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

这有点复杂,但这似乎有效:

的package.json

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

实例/的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"
  }
}

实例/ 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(),
    ]
};

实例/ .babelrc

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

{
  "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"
  ]
}

实例/生成文件

我喜欢使用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组件热负载还有一些工作要做。