1 | # Jsenv node module import map
|
2 |
|
3 | [![github package](https://img.shields.io/github/package-json/v/jsenv/jsenv-node-module-import-map.svg?logo=github&label=package)](https://github.com/jsenv/jsenv-node-module-import-map/packages)
|
4 | [![npm package](https://img.shields.io/npm/v/@jsenv/node-module-import-map.svg?logo=npm&label=package)](https://www.npmjs.com/package/@jsenv/node-module-import-map)
|
5 | [![github ci](https://github.com/jsenv/jsenv-node-module-import-map/workflows/ci/badge.svg)](https://github.com/jsenv/jsenv-node-module-import-map/actions?workflow=ci)
|
6 | [![codecov coverage](https://codecov.io/gh/jsenv/jsenv-node-module-import-map/branch/master/graph/badge.svg)](https://codecov.io/gh/jsenv/jsenv-node-module-import-map)
|
7 |
|
8 | Generate importMap for a project node modules.
|
9 |
|
10 | ## Table of contents
|
11 |
|
12 | - [Presentation](#Presentation)
|
13 | - [How it works](#how-it-works)
|
14 | - [Code example](#code-example)
|
15 | - [API](./docs/api.md)
|
16 | - [Concrete example](#concrete-example)
|
17 | - [Step 1 - Setup basic project](#step-1---setup-project)
|
18 | - [Step 2 - Generate project importMap](#step-2---generate-project-importMap)
|
19 | - [Custom node module resolution](#custom-node-module-resolution)
|
20 | - [Installation](#installation-using-npm)
|
21 |
|
22 | ## Presentation
|
23 |
|
24 | `@jsenv/node-module-import-map` generates importMap for your project node_modules.<br />
|
25 | — see [importMap spec](https://github.com/WICG/import-maps)
|
26 |
|
27 | ## How it works
|
28 |
|
29 | Reads `package.json` and recursively try to find your dependencies.<br />
|
30 |
|
31 | Be sure node modules are on your filesystem because we'll use the filesystem structure to generate the importMap. For that reason, you must use it after `npm install` or anything that is responsible to generate the node_modules folder and its content on your filesystem.<br />
|
32 |
|
33 | ## Code example
|
34 |
|
35 | Here is code example using `@jsenv/node-module-import-map` to create an `importMap.json` file.
|
36 |
|
37 | ```js
|
38 | const { generateImportMapForProjectPackage } = require("@jsenv/node-module-import-map")
|
39 |
|
40 | generateImportMapForProjectPackage({
|
41 | projectDirectoryUrl: "file:///Users/you/folder",
|
42 | includeDevDependencies: true,
|
43 | importMapFile: true,
|
44 | importMapFileRelativeUrl: "./importMap.json",
|
45 | })
|
46 | ```
|
47 |
|
48 | For more information check the [api documentation](./docs/api.md).
|
49 |
|
50 | ## Concrete example
|
51 |
|
52 | This part explains how to setup a real environment to see `@jsenv/node-module-import-map` in action.
|
53 | It reuses a preconfigured project where you can generate import map file.
|
54 |
|
55 | ### Step 1 - Setup basic project
|
56 |
|
57 | ```console
|
58 | git clone https://github.com/jsenv/jsenv-node-module-import-map.git
|
59 | ```
|
60 |
|
61 | ```console
|
62 | cd ./jsenv-node-module-import-map/docs/basic-project
|
63 | ```
|
64 |
|
65 | ```console
|
66 | npm install
|
67 | ```
|
68 |
|
69 | ### Step 2 - Generate project importMap
|
70 |
|
71 | Running command below will generate import map file at `docs/basic-project/importMap.json`.
|
72 |
|
73 | ```console
|
74 | node ./generate-import-map.js
|
75 | ```
|
76 |
|
77 | ## Custom node module resolution
|
78 |
|
79 | `@jsenv/node-module-import-map` uses a custom node module resolution.<br />
|
80 | — see [node module resolution on node.js](https://nodejs.org/api/modules.html#modules_all_together)
|
81 |
|
82 | It behaves as Node.js with one big change:
|
83 |
|
84 | > A node module will not be found if it is outside your project folder.
|
85 |
|
86 | We do this because importMap are used on the web where a file outside project folder would fail.<br/>
|
87 |
|
88 | And here is why:
|
89 |
|
90 | You have a server at `https://example.com` serving files inside `/Users/you/project`.<br />
|
91 | Your project uses a file outside of your project folder like `/Users/you/node_modules/whatever/index.js`.
|
92 |
|
93 | From a filesystem perspective we could find file using `../node_modules/whatever/index.js`.<br />
|
94 | For a web client however `../node_modules/whatever/index.js` resolves to `https://example.com/node_modules/whatever/index.js`. Server would be requested at that url searching for `/Users/you/project/node_modules/whatever/index.js` instead of `/Users/you/node_modules/whatever/index.js`.
|
95 |
|
96 | In practice it does not impact you because node modules are inside your project folder. If not, explicitely write your dependencies in your `package.json` and run `npm install`.
|
97 |
|
98 | ## Installation
|
99 |
|
100 | If you never installed a jsenv package, read [Installing a jsenv package](https://github.com/jsenv/jsenv-core/blob/master/docs/installing-jsenv-package.md#installing-a-jsenv-package) before going further.
|
101 |
|
102 | This documentation is up-to-date with a specific version so prefer any of the following commands
|
103 |
|
104 | ```console
|
105 | npm install --save-dev @jsenv/node-module-import-map@9.2.0
|
106 | ```
|
107 |
|
108 | ```console
|
109 | yarn add --dev @jsenv/node-module-import-map@9.2.0
|
110 | ```
|