
prepare-module
Prepare your front-end module with dependencies for npm publishing.
Pre-requisites
- Your project is a library you intend to publish on npm,
- your project contains front-end ESM scripts in a
src
subfolder, - your transpiler generates transpiled
.js
and .d.ts
files into src
, - you want to
import ... from '@itrocks/something'
without TypeScript errors.
Installation
Install @itrocks/prepare-module
as a development dependency:
npm i @itrocks/prepare-module --save-dev
Usage
In your project, install the required dependency
and import the necessary front-end script with a relative path:
import { SortedArrayBy } from '../node_modules/@itrocks/sorted-array/sorted-array.js'
Then, add the following to your packages.json file:
{
"scripts": {
"prepare": "prepare-module"
}
}
How It Works
When your publish your package using npm publish
, prepare-module
will handle the following tasks:
- Copies your
js
script and .d.ts
files from src
to your project root directory, - Updates the import paths in your script to relative imports within
node_modules
, as shown below.
If your project is published under the same namespace as the dependency:
import { SortedArrayBy } from '../sorted-array/sorted-array.js'
If published under a different namespace:
import { SortedArrayBy } from '../../@itrocks/sorted-array/sorted-array.js'
If published without a namespace:
import { SortedArrayBy } from '../@itrocks/sorted-array/sorted-array.js'
Deployment
When coding with TypeScript, avoid deploying files in src/*.js
:
the scripts in your project root directory are the final ones to be used.
See a complete use case in the @itrocks/build library.