1

I am developing a NPM typescript package to code-split from my main application.

The two projects share a root directory, i.e.:

- mylib
  - package.json
  - tsconfig.json
  - src/
  - dist/
- myapp
  - package.json
  - tsconfig.json
  - src/

If myapp/package.json attempts to link mylib as file:../mylib, then npm install succeeds... but the only way I can succesfully import is to use ... from mylib/src/ (otherwise, the tsc compiler does not recognize the path). However, this import syntax differs from the production version of the package (which would not include src).

Plus, I need to be able to also develop mylib against a second app which is not typescript enabled. Including the src in the import paths would not work in this scenario, as this path would not resolve against the published NPM package when the application is built by the CI.

I came across one solution which does technically work:

cd mylib
cp package.json dist/
cd dist
npm link

cd ../../myapp
npm link mylib

Thus, the npm link is created to the dist folder. But it requires copying the package.json, otherwise the link just goes to mylib rather than mylib/dist.

Unfortunately, this quickly falls apart, because my mylib/package.json has relative import paths:

"react": "file:../myapp/node_modules/react",

Which are necessary in order to preserve only one instance of the React package. Copying the package.json into the dist/ folder to create the link causes these imports to fail to resolve. Using an absolute path would not work for other developers on my project. Besides, copying the package.json into the dist/ seems like an anti-pattern.

Edit 1

I tried switching to yarn, per the comments. It exhibits the exact same behavior as NPM in this regard. Namely, the yarn link command always points at the folder with package.json. Again, this forces me to use the src/ folder in my imports, which will not work in a production build pointing at the production NPM packages.

Zane Claes
  • 14,732
  • 15
  • 74
  • 131
  • 1
    you may need 'yarn workspaces` or `lerna`, https://github.com/babel/babel.git use lerna, https://github.com/facebook/react use yarn workspaces, google monorepo to see more details – 欧阳斌 Nov 02 '20 at 01:58
  • I just discovered Lerna as I was researching more. Glad to hear a vote for it. Would you recommend one over the other (yarn vs. lerna)? – Zane Claes Nov 02 '20 at 02:26
  • 1
    yarn is more easy to use – 欧阳斌 Nov 02 '20 at 03:41
  • Thanks! Unfortunately, after switching to yarn, I'm having the exact same problem. Namely: the `yarn link` will not let me point at the `dist` folder. The symlink goes to the root of the NPM package, and therefore my import statements require the `src/` path component. – Zane Claes Nov 02 '20 at 14:03

1 Answers1

0

firstly workspaces does not require link a simple way to solve you prob

// packages/project-a/index.ts
// for development
export * from src/index.ts;

// packages/project-a/index.js
// for production
module.exports = require('dist/index.js');

create a index.js, index.ts in you modules, when use ts-node to run you project, program will auto load index.tswhen use node to run you project, program will auto load index.js a better way is compile how project at root, see https://github.com/vuejs/vue-next

欧阳斌
  • 2,231
  • 1
  • 8
  • 8