ttypescript-browser-like-import-transformer

A custom transformer that can be used with ttypescript to transform ts imports to browser style imports

---

Project maintained by Jack-Works Hosted on GitHub Pages — Theme by mattgraham

Home > config > PluginConfigs > importMap

PluginConfigs.importMap property

Use import map as the transform rules. (This has the highest priority.)

Signature:

importMap?: ImportMapResolution | ImportMapCustomResolution

Remarks

**Experimental** may have many bugs on transforming with importMap. See ImportMapResolution (static) or ImportMapCustomResolution (dynamic)

Example

If you’re using snowpack, let’s assume the folder is like

Folder:

/web_modules/ # generated by snowpack
/src/ # your source code
/dist/ # your output
tsconfig.json # tsconfig at here

You must set rootDir when using importMap.

Filename: snowpack/tsconfig.json

{
    "compilerOptions": {
        "plugins": [
            {
                // @magic-works/ttypescript-browser-like-import-transformer
                "transform": "@magic-works/ttypescript-browser-like-import-transformer",
                "after": true,
                "importMap": {
                    "type": "path",
                    "mapPath": "./web_modules/import-map.json",
                    "simulateRuntimeImportMapPosition": "/web_modules/",
                    "simulateRuntimeSourceRoot": "/dist/"
                }
            }
        ],
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./dist",
        "rootDir": "./src",
        "moduleResolution": "node"
    }
}

Source:

Filename: snowpack/src/index.ts

import * as _ from 'lodash-es'
console.log(_)
import './another'

Output:

Filename: snowpack/index.js

import * as _ from "/web_modules/lodash-es.js?rev=806d1b9f78";
console.log(_);
import "./another.js";