1 | <div align="center">
|
2 | <a href="https://github.com/webpack/webpack">
|
3 | <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
4 | </a>
|
5 | </div>
|
6 |
|
7 | [![npm][npm]][npm-url]
|
8 | [![node][node]][node-url]
|
9 | [![chat][chat]][chat-url]
|
10 | [![size][size]][size-url]
|
11 |
|
12 | # parcel-codegen-loader
|
13 |
|
14 | The `parcel-codegen-loader` resolves `import` / `require()` on a file into a Node.js module that is evaluated during the compilation. It expects the Node.js module to generate a webpack module on the fly establishing meta programming.
|
15 |
|
16 | It follows pretty much the [parcel-plugin-codegen](https://www.npmjs.com/package/parcel-plugin-codegen) implementation.
|
17 |
|
18 | ## Getting Started
|
19 |
|
20 | To begin, you'll need to install `parcel-codegen-loader`:
|
21 |
|
22 | ```sh
|
23 | npm install parcel-codegen-loader --save-dev
|
24 | ```
|
25 |
|
26 | Import (or `require`) the target file(s) in one of the bundle's files:
|
27 |
|
28 | **file.js**
|
29 |
|
30 | ```js
|
31 | import { entries } from './file.codegen';
|
32 | ```
|
33 |
|
34 | where `file.codegen` could be written as follows:
|
35 |
|
36 | ```js
|
37 | module.exports = function() {
|
38 | const entries = [1, 2, 3];
|
39 | return `export const entries = ${JSON.stringify(entries)};`;
|
40 | };
|
41 | ```
|
42 |
|
43 | Then add the loader to your `webpack` config. For example:
|
44 |
|
45 | **webpack.config.js**
|
46 |
|
47 | ```js
|
48 | module.exports = {
|
49 | module: {
|
50 | rules: [
|
51 | {
|
52 | test: /\.codegen$/i,
|
53 | use: [
|
54 | {
|
55 | loader: 'parcel-codegen-loader',
|
56 | },
|
57 | ],
|
58 | },
|
59 | ],
|
60 | },
|
61 | };
|
62 | ```
|
63 |
|
64 | And run `webpack` via your preferred method. This will emit `file.png` as a file
|
65 | in the output directory (with the specified naming convention, if options are
|
66 | specified to do so) and returns the public URI of the file.
|
67 |
|
68 | > ℹ️ By default the filename of the resulting file is the hash of the file's contents with the original extension of the required resource.
|
69 |
|
70 | ## Options
|
71 |
|
72 | (No options yet.)
|
73 |
|
74 | ## Examples
|
75 |
|
76 | The following examples show how one might use `parcel-codegen-loader` and what the result would be.
|
77 |
|
78 | ### Get Infos from a Remote Source
|
79 |
|
80 | Let's say you want to get a static set of users for your module from an API.
|
81 |
|
82 | **remote.codegen**
|
83 |
|
84 | ```js
|
85 | const axios = require('axios');
|
86 |
|
87 | module.exports = async function() {
|
88 | const res = await axios.get('https://jsonplaceholder.typicode.com/users');
|
89 | const users = res.data.map(m => ({ id: m.id, name: m.name, mail: m.email }));
|
90 | return `export const users = ${JSON.stringify(users)};`;
|
91 | };
|
92 | ```
|
93 |
|
94 | You can now use the following code to retrieve this static info:
|
95 |
|
96 | ```js
|
97 | import { users } from './remote.codegen';
|
98 | ```
|
99 |
|
100 | ## Contributing
|
101 |
|
102 | Contributions in any form are appreciated and much welcome!
|
103 |
|
104 | Just make sure to post an issue or reach out to me on [Gitter](https://gitter.im/piral-io/community) before starting actual work on anything. It really helps to avoid problems.
|
105 |
|
106 | ## License
|
107 |
|
108 | This plugin is released using the MIT license.
|
109 |
|
110 | [npm]: https://img.shields.io/npm/v/parcel-codegen-loader.svg
|
111 | [npm-url]: https://npmjs.com/package/parcel-codegen-loader
|
112 | [node]: https://img.shields.io/node/v/parcel-codegen-loader.svg
|
113 | [node-url]: https://nodejs.org
|
114 | [chat]: https://img.shields.io/badge/gitter-piral.io%2Fcommunity-brightgreen.svg
|
115 | [chat-url]: https://gitter.im/piral-io/community
|
116 | [size]: https://packagephobia.now.sh/badge?p=parcel-codegen-loader
|
117 | [size-url]: https://packagephobia.now.sh/result?p=parcel-codegen-loader
|