I'm creating my first Typescript library that exports some functions.
The structure of the project is this:
myProject
|_ assets/
|_ logo.png
|_ coverage
|_ ...some stuff
|_ demo
|_ index.html
|_ index.ts
|_ style.css
|_ dist
|_ ...
|_ dist-demo
|_ ...
|_ node_modules
|_ src
|_ lib/
|_ types.ts
|_ index.ts
|_ index.ts
|_ .gitignore
|_ package.json
index.ts is:
export { sayHello } from './lib'
lib/index.ts is:
export function sayHello() {
console.log('Hello')
}
(Obviously, this is only an easy example, the important thing is the structure).
I decided to create a demo page: I created the demo folder and inside it, I created index.html, index.ts, style.css.
Then I decided to use Parcel as bundler. Keep in mind that I'm a junior developer.
So my package.json is:
{
"name": "myLib",
"version": "1.0.0",
"repository": "https://github.com/.../myLib.git",
"author": "...",
"license": "MIT",
"private": true,
"source": "src/index.ts",
"main": "dist/main.js",
"module": "dist/module.js",
"types": "dist/index.d.ts",
"scripts": {
"watch": "parcel watch",
"build": "parcel build",
"build:demo": "parcel build demo/index.html --dist-dir dist-demo",
"start:demo": "parcel demo/index.html",
"compile": "rm -rf dist/ && tsc --outDir dist",
"compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
"prepublish": "yarn compile",
},
"dependencies": {},
"devDependencies": {
"@parcel/packager-ts": "^2.1.0",
"@parcel/transformer-typescript-types": "^2.1.0",
"parcel": "latest",
"typescript": ">=3.0.0"
}
}
If I run yarn build, the build is created in dist folder.
Then, I would use the bundled file and test it in the demo page, so my demo files are:
demo/index.html:
<html>
<head>
<link rel="icon" type="image/png" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Say hello</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.ts"></script>
</body>
</html>
demo/index.ts:
import { sayHello } from '../dist/module' // <-- ???
sayHello()
If I run yarn start:demo, the demo page on http://localhost:1234/ doesn't work: 404. Page not found.
Why?
And then, how can I create a public site with the content of the demo page. I think to deploy it using Netflify. What's wrong with my package.json configuration?
Summary: what I would like is to create a library that:
Thanks a lot!
I tried also:
"lib": "dist/main.js",
"demo": "dist-demo/main.js",
"type": "module",
"module": "dist/module.js",
"targets": {
"lib": {
"source": "src/index.ts",
"distDir": "./dist",
"isLibrary": true
},
"demo": {
"source": "demo/index.html",
"distDir": "./dist-demo"
}
},
"scripts": {
"watch": "parcel watch src/index.ts",
"build": "parcel build src/index.ts --dist-dir dist",
"build:demo": "parcel build demo/index.html --dist-dir dist-demo",
"start:demo": "parcel demo/index.html",
"compile": "rm -rf dist/ && tsc --outDir dist",
"compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
"prepublish": "yarn compile",
"check": "tsc --noEmit"
},
but it doesn't work
Now I have:
...
"source": "src/index.ts",
"main": "dist/main.js",
"module": "dist/module.js",
"types": "dist/index.d.ts",
"scripts": {
"watch": "parcel watch ./src/index.ts",
"build": "parcel build ./src/index.ts --dist-dir dist",
"build:demo": "parcel build ./demo/index.html --dist-dir dist-demo",
"start:demo": "parcel ./demo/index.html --dist-dir dist-demo",
"compile": "rm -rf dist/ && tsc --outDir dist",
"compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
"prepublish": "yarn compile"
},
...
yarn build and yarn start:demo work but when I run yarn build:demo, I get:
yarn run v1.22.17
$ parcel build ./demo/index.html --dist-dir dist-demo
🚨 Build failed.
@parcel/core: No transformers found for demo/index.html with pipeline: 'types'.
/Users/.../node_modules/@parcel/config-default/index.json:3:3
2 | "bundler": "@parcel/bundler-default",
> 3 | "transformers": {
> | ^^^^^^^^^^^^^^^^^
> 4 | "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 5 | "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 6 | "data-url:*": ["...", "@parcel/transformer-inline-string"],
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 7 | "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 8 | "@parcel/transformer-worklet",
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 9 | "..."
> | ^^^^^^^^^^^
> 10 | ],
> | ^^^^^^
> 11 | "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 12 | "@parcel/transformer-babel",
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 13 | "@parcel/transformer-js",
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Parcel build by default everything he needs in the dist folder until you specify another one using the --dist-dir flag. So your problem here is that the build command will produce a dist folder like:
dist/main.js
dist/module.js
dist/index.d.ts
But when you run start:demo, parcel also compile the files in dist:
dist/index.125bf0c5.js
dist/index.html
dist/main.js
dist/module.js
dist/index.d.ts
Here come the weird part, if you delete the dist folder and re-run the build steps, the start:demo files are no more added (looks like a bug). So the index.html will be not be found.
To fix this problem, I suggest you to separate the different dist folders: dist for the library only and dist-demo for website (prod and dev):
"build": "parcel build",
"start:demo": "parcel ./demo/index.html --dist-dir dist-demo",