[6a3a178] | 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.
|
---|