How to compile and watch *two* Typescript packages, one that depends on the other?

Question

I'm developing a Typescript library under src/ and examples under examples/. The directory structure is this:

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

I can compile the library with these instructions, but I'm not sure how to watch both projects simultaneously, especially not when one has a dependency on the other.

examples/package.json looks like this:

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

i.e., I'm using a file: dependency so that I don't have to keep publishing the library to npm and reinstalling it. I'm hoping that'll help.

How can I set this up for easy development?

Answer 1

You need to generate DTS files from the src package and make those available to the examples package. One way to do this would be to create a tsconfig.json in each package.

Answer 2

This is a bit complicated, but this appears to be working:

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

Just allows us to use import in our webpack.config.babel.js.

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

examples/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"
  ]
}

examples/Makefile

I like to use Make instead of npm scripts.

# 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

Running

With all of that, you should be able to just cd into the examples dir and run make. It'll start webpack-dev-server, watch your files and automatically reload.

React component hot loading is a bit more work yet.