|
1 | | -# koa-npm-resolution |
2 | | -Koa middleware that transforms NPM package specifiers to relative paths |
| 1 | +# koa-node-resolve |
| 2 | + |
| 3 | +Middleware for Koa servers that resolves Node package specifiers in standard JS modules to relative paths for use on the web. |
| 4 | + |
| 5 | +The following import uses a _bare module specifier_, which won't currently load natively in browsers (until [import maps](https://www.chromestatus.com/feature/5315286962012160) are available): |
| 6 | + |
| 7 | +```js |
| 8 | +import { foo } from "stuff"; |
| 9 | +``` |
| 10 | + |
| 11 | +`koa-node-resolve` solves this problem by resolving `stuff` using the same rules as [Node `require()`](https://nodejs.org/api/modules.html#modules_all_together), and transforming the import specifier to a path that can be loaded natively by any browser that [supports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility) standard JS modules: |
| 12 | + |
| 13 | +```js |
| 14 | +import { foo } from "./node_modules/stuff/index.js"; |
| 15 | +``` |
| 16 | + |
| 17 | +Because this is middleware, you can use it in a simple static file server as well as a proxy server sitting in front of a test server such as the one `karma` starts up. (See [karma testing setup](#karma-testing-setup) below.) |
| 18 | + |
| 19 | +Note: HTML and JavaScript are parsed on every request for those content-types, it is intended for use in development context to facilitate build-free testing/iteration as opposed to in a high volume production web server. |
| 20 | + |
| 21 | +## Installation |
| 22 | + |
| 23 | +```sh |
| 24 | +$ npm install --save koa-node-resolve |
| 25 | +``` |
| 26 | + |
| 27 | +## Usage |
| 28 | + |
| 29 | +Create your own mini-development server in file `./dev-server.js`. This one depends on `koa` and `koa-static`, so you'll need to `npm install --save-dev koa koa-static` for your project to use it. |
| 30 | + |
| 31 | +```js |
| 32 | +const Koa = require('koa'); |
| 33 | +const staticFiles = require('koa-static'); |
| 34 | +const { nodeResolve } = require('koa-node-resolve'); |
| 35 | +const server = new Koa() |
| 36 | + .use(nodeResolve()) |
| 37 | + .use(staticFiles('.')) |
| 38 | + .listen(3000); |
| 39 | +``` |
| 40 | + |
| 41 | +```sh |
| 42 | +$ node dev-server.js |
| 43 | +``` |
| 44 | + |
| 45 | +Now you can serve up your web assets and Node package specifiers will be transformed on request. |
| 46 | + |
| 47 | +## Karma Testing Setup |
| 48 | + |
| 49 | +In a `karma` setup, your `karma.conf.js` file could create the Koa server before exporting the config. The Koa server uses the `koa-proxy` package (therefore `npm install --save-dev koa-proxy`) in between the browser and the Karma server, transforming all the Node package specifiers encountered in documents located under the `base/` URL namespace, which is a special Karma behavior for partitioning the package resources under test from Karma support resources. |
| 50 | + |
| 51 | +```js |
| 52 | +const Koa = require('koa'); |
| 53 | +const mount = require('koa-mount'); |
| 54 | +const proxy = require('koa-proxy'); |
| 55 | +const { nodeResolve } = require('koa-node-resolve'); |
| 56 | +const server = new Koa() |
| 57 | + .use(mount('/base', nodeResolve())) |
| 58 | + .use(proxy({ host: 'http://127.0.0.1:9876' })) |
| 59 | + .listen(9877); |
| 60 | + |
| 61 | +module.exports = config => { |
| 62 | + config.set({ |
| 63 | + upstreamProxy: { |
| 64 | + hostname: '127.0.0.1', |
| 65 | + port: 9877, |
| 66 | + }, |
| 67 | + files: [ |
| 68 | + { pattern: 'test/**/*.js', type: 'module' }, |
| 69 | + { pattern: '**/*.js', included: false }, |
| 70 | + { pattern: 'node_modules/**/*', included: false }, |
| 71 | + ], |
| 72 | + }); |
| 73 | +}; |
| 74 | +``` |
| 75 | + |
| 76 | +In this setup, the Koa proxy server that runs the Node resolution middleware will be on port 9877 and the Karma server will be on port 9876, so be sure to open up `http://127.0.0.1:9877` in your browser rather than `http://127.0.0.1:9876`. The `upstreamProxy` configuration block tells Karma, when it launches browsers, to points them to the Koa app instead of directly to the Karma server. |
| 77 | + |
| 78 | +Note also that in this configuration its important to tell Karma that the test files are modules and to serve those up, but to list the other files, like the ones in `node_modules` as available but not "included" (i.e. Karma can serve them by request, but shouldn't add inline dependencies on them when generating its "context" HTML). |
0 commit comments