Add instruction on how to remove ESM build

This commit is contained in:
Joseph Garrone 2020-05-26 14:09:15 +02:00
parent 07aa89e736
commit 3a12067b15
3 changed files with 50 additions and 11 deletions

View file

@ -80,7 +80,9 @@ A good way to host your repo image is to open an issue named ASSET in your proje
While you are at it submit this image as *social preview* in your repos github page's settings so that when you share on While you are at it submit this image as *social preview* in your repos github page's settings so that when you share on
Twitter or Reddit you don't get your GitHub profile picture to show up. Twitter or Reddit you don't get your GitHub profile picture to show up.
## Disable CDN build ## Disable CDN build
### Completely disable
If your project does not target the browser or if you are not interested in offering CDN distribution: If your project does not target the browser or if you are not interested in offering CDN distribution:
@ -89,6 +91,40 @@ If your project does not target the browser or if you are not interested in offe
- Remove ``/dist/esm/`` entry from ``files`` in ``package.json`` - Remove ``/dist/esm/`` entry from ``files`` in ``package.json``
- Remove ``simplifyify`` and ``terser`` from dev dependencies. - Remove ``simplifyify`` and ``terser`` from dev dependencies.
### Only disable ES Module build ( ``dist/zz_esm/*`` )
If ``npm run build`` fail because ``tsc -p tsconfig.esm.json`` gives errors you may want to remove the ESM
build but keep the ``bundle.js`` and ``bundle.min.js``. To do that:
In ``package.json`` replace theses ``scripts``:
```json
{
"cdn:bundle:.js": "simplifyify dist/index.js -s #{REPO_NAME}# -o dist/bundle.js --debug --bundle",
"cdn:bundle:.min.js": "terser dist/bundle.js -cmo dist/bundle.min.js",
"cdn:bundle": "npm run cdn:bundle:.js && npm run cdn:bundle:.min.js",
"cdn:esm": "tsc -p tsconfig.esm.json",
"cdn": "npm run cdn:bundle && npm run cdn:esm",
}
```
By theses ones:
```json
{
"cdn:.js": "simplifyify dist/index.js -s #{REPO_NAME}# -o dist/bundle.js --debug --bundle",
"cdn:.min.js": "terser dist/bundle.js -cmo dist/bundle.min.js",
"cdn": "npm run cdn:.js && npm run cdn:.min.js",
}
```
Remove the ``/dist/zz_esm/`` entry from ``package.json``'s ``files``.
Remove ``tsconfig.esm.json``. ( file at the root of the project )
Edit the ``README.md`` to remove instructions about how to
import as ES module.
## Remove unwanted dev dependencies ## Remove unwanted dev dependencies
Dev dependencies that are not required by the template ( you can safely remove them if you don't use them ): Dev dependencies that are not required by the template ( you can safely remove them if you don't use them ):

View file

@ -35,18 +35,18 @@ import { myFunction } from '#{REPO_NAME}#/myFunction';
import { myObject } from '#{REPO_NAME}#/myObject'; import { myObject } from '#{REPO_NAME}#/myObject';
``` ```
## From HTML with CDN ## Import from HTML, with CDN
Expose a global (wider browser support): Import it via a bundle that creates a global ( wider browser support ):
```html ```html
<script src="//unpkg.com/#{REPO_NAME}#/umd_bundle.min.js"></script> <script src="//unpkg.com/#{REPO_NAME}#/bundle.min.js"></script>
<script> <script>
var myFunction = #{REPO_NAME_NO_DASHES}#.myFunction; const { myFunction, myObject } = #{REPO_NAME}#;
</script> </script>
``` ```
Or import as an ES module: Or import it as an ES module:
```html ```html
<script type="module"> <script type="module">
@ -54,6 +54,8 @@ Or import as an ES module:
</script> </script>
``` ```
*You can specify the version you wish to import: * [unpkg.com](https://unpkg.com)
## Contribute ## Contribute
```bash ```bash

View file

@ -11,8 +11,8 @@
"scripts": { "scripts": {
"test": "node ./dist/test", "test": "node ./dist/test",
"tsc": "npx tsc", "tsc": "npx tsc",
"cdn:bundle:.js": "simplifyify dist/index.js -s #{REPO_NAME_NO_DASHES}# -o dist/umd_bundle.js --debug --bundle", "cdn:bundle:.js": "simplifyify dist/index.js -s #{REPO_NAME}# -o dist/bundle.js --debug --bundle",
"cdn:bundle:.min.js": "terser dist/umd_bundle.js -cmo dist/umd_bundle.min.js", "cdn:bundle:.min.js": "terser dist/bundle.js -cmo dist/bundle.min.js",
"cdn:bundle": "npm run cdn:bundle:.js && npm run cdn:bundle:.min.js", "cdn:bundle": "npm run cdn:bundle:.js && npm run cdn:bundle:.min.js",
"cdn:esm": "tsc -p tsconfig.esm.json", "cdn:esm": "tsc -p tsconfig.esm.json",
"cdn": "npm run cdn:bundle && npm run cdn:esm", "cdn": "npm run cdn:bundle && npm run cdn:esm",
@ -24,10 +24,11 @@
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#", "homepage": "https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#",
"files": [ "files": [
"/src/",
"/dist/*.{d.ts,js,js.map}", "/dist/*.{d.ts,js,js.map}",
"/dist/tools/", "/dist/tools/",
"/dist/zz_esm/" "/dist/zz_esm/",
"/src/*.ts",
"/src/tools/"
], ],
"keywords": [], "keywords": [],
"devDependencies": { "devDependencies": {
@ -38,4 +39,4 @@
"simplifyify": "8.0.1", "simplifyify": "8.0.1",
"terser": "4.6.13" "terser": "4.6.13"
} }
} }