1 | # @ampproject/remapping
|
---|
2 |
|
---|
3 | > Remap sequential sourcemaps through transformations to point at the original source code
|
---|
4 |
|
---|
5 | Remapping allows you to take the sourcemaps generated through transforming your code and
|
---|
6 | "remap" them to the original source locations. Think "my minified code, transformed with babel and
|
---|
7 | bundled with webpack", all pointing to the correct location in your original source code.
|
---|
8 |
|
---|
9 | With remapping, none of your source code transformations need to be aware of the input's sourcemap,
|
---|
10 | they only need to generate an output sourcemap. This greatly simplifies building custom
|
---|
11 | transformations (think a find-and-replace).
|
---|
12 |
|
---|
13 | ## Installation
|
---|
14 |
|
---|
15 | ```sh
|
---|
16 | npm install @ampproject/remapping
|
---|
17 | ```
|
---|
18 |
|
---|
19 | ## Usage
|
---|
20 |
|
---|
21 | ```typescript
|
---|
22 | function remapping(
|
---|
23 | map: SourceMap | SourceMap[],
|
---|
24 | loader: (file: string) => (SourceMap | null | undefined),
|
---|
25 | options?: { excludeContent: boolean, decodedMappings: boolean }
|
---|
26 | ): SourceMap;
|
---|
27 | ```
|
---|
28 |
|
---|
29 | `remapping` takes the final output sourcemap, and a `loader` function. For every source file pointer
|
---|
30 | in the sourcemap, the `loader` will be called with the resolved path. If the path itself represents
|
---|
31 | a transformed file (it has a sourcmap associated with it), then the `loader` should return that
|
---|
32 | sourcemap. If not, the path will be treated as an original, untransformed source code.
|
---|
33 |
|
---|
34 | ```js
|
---|
35 | // Babel transformed "helloworld.js" into "transformed.js"
|
---|
36 | const transformedMap = JSON.stringify({
|
---|
37 | file: 'transformed.js',
|
---|
38 | // 1st column of 2nd line of output file translates into the 1st source
|
---|
39 | // file, line 3, column 2
|
---|
40 | mappings: ';CAEE',
|
---|
41 | sources: ['helloworld.js'],
|
---|
42 | version: 3,
|
---|
43 | });
|
---|
44 |
|
---|
45 | // Uglify minified "transformed.js" into "transformed.min.js"
|
---|
46 | const minifiedTransformedMap = JSON.stringify({
|
---|
47 | file: 'transformed.min.js',
|
---|
48 | // 0th column of 1st line of output file translates into the 1st source
|
---|
49 | // file, line 2, column 1.
|
---|
50 | mappings: 'AACC',
|
---|
51 | names: [],
|
---|
52 | sources: ['transformed.js'],
|
---|
53 | version: 3,
|
---|
54 | });
|
---|
55 |
|
---|
56 | const remapped = remapping(
|
---|
57 | minifiedTransformedMap,
|
---|
58 | (file) => {
|
---|
59 |
|
---|
60 | // The "transformed.js" file is an transformed file.
|
---|
61 | if (file === 'transformed.js') {
|
---|
62 | return transformedMap;
|
---|
63 | }
|
---|
64 |
|
---|
65 | // Loader will be called to load transformedMap's source file pointers as well.
|
---|
66 | console.assert(file === 'helloworld.js');
|
---|
67 | return null;
|
---|
68 | }
|
---|
69 | );
|
---|
70 |
|
---|
71 | console.log(remapped);
|
---|
72 | // {
|
---|
73 | // file: 'transpiled.min.js',
|
---|
74 | // mappings: 'AAEE',
|
---|
75 | // sources: ['helloworld.js'],
|
---|
76 | // version: 3,
|
---|
77 | // };
|
---|
78 | ```
|
---|
79 |
|
---|
80 | In this example, `loader` will be called twice:
|
---|
81 |
|
---|
82 | 1. `"transformed.js"`, the first source file pointer in the `minifiedTransformedMap`. We return the
|
---|
83 | associated sourcemap for it (its a transformed file, after all) so that sourcemap locations can
|
---|
84 | be traced through it into the source files it represents.
|
---|
85 | 2. `"helloworld.js"`, our original, unmodified source code. This file does not have a sourcemap, so
|
---|
86 | we return `null`.
|
---|
87 |
|
---|
88 | The `remapped` sourcemap now points from `transformed.min.js` into locations in `helloworld.js`. If
|
---|
89 | you were to read the `mappings`, it says "0th column of the first line output line points to the 1st
|
---|
90 | column of the 2nd line of the file `helloworld.js`".
|
---|
91 |
|
---|
92 | ### Multiple transformations of a file
|
---|
93 |
|
---|
94 | As a convenience, if you have multiple single-source transformations of a file, you may pass an
|
---|
95 | array of sourcemap files in the order of most-recent transformation sourcemap first. So our above
|
---|
96 | example could have been writen as:
|
---|
97 |
|
---|
98 | ```js
|
---|
99 | const remapped = remapping(
|
---|
100 | [minifiedTransformedMap, transformedMap],
|
---|
101 | () => null
|
---|
102 | );
|
---|
103 |
|
---|
104 | console.log(remapped);
|
---|
105 | // {
|
---|
106 | // file: 'transpiled.min.js',
|
---|
107 | // mappings: 'AAEE',
|
---|
108 | // sources: ['helloworld.js'],
|
---|
109 | // version: 3,
|
---|
110 | // };
|
---|
111 | ```
|
---|
112 |
|
---|
113 | ### Options
|
---|
114 |
|
---|
115 | #### excludeContent
|
---|
116 |
|
---|
117 | By default, `excludeContent` is `false`. Passing `{ excludeContent: true }`
|
---|
118 | will exclude the `sourcesContent` field from the returned sourcemap. This is
|
---|
119 | mainly useful when you want to reduce the size out the sourcemap.
|
---|
120 |
|
---|
121 | #### decodedMappings
|
---|
122 |
|
---|
123 | By default, `decodedMappings` is `false`. Passing `{ decodedMappings: true }`
|
---|
124 | will leave the `mappings` field in a [decoded
|
---|
125 | state](https://github.com/rich-harris/sourcemap-codec) instead of encoding
|
---|
126 | into a VLQ string.
|
---|