0.1.0 • Published 2 years ago
@bombits/esm-template v0.1.0
ES Module Template
Write React/TS and get single ESM file
A simple template to write React/Typescript using Vite tooling to transpile/pack into a plain ES module that uses CDN as a first feature
This package was created via npx vite create
, then appending types/externalDeps.d.ts
and deps.ts
and targeting configs to ESNext
Example
Input
myESModule.tsx
import { React } from './deps'
import { hello } from './hello'
export function MyESModule(){
return (
<div>
{ hello( 'esm' ) }
</div>
)
}
hello.ts
export function hello( name?:string ){ let message = `hello ${ name }` return message }
Output
After yarn build
ie vite build
/lib/index.js
import * as CDNReact from "https://cdn.skypack.dev/react"; const React = CDNReact; function hello(name) { return `hello ${name}`; } function MyESModule() { return /* @__PURE__ */ React.createElement("div", null, hello("esm")); } export { MyESModule };
### CDN
To understand the CDN part, we have two typescript helpers:
> ``` types/externalDeps.d.ts```
```ts
declare module 'https://*'
declare module 'https://cdn.skypack.dev/react'
and
deps.ts
import * as React_ from 'react' import * as CDNReact from 'https://cdn.skypack.dev/react'
export const React = CDNReact as unknown as typeof React_
0.1.0
2 years ago