Estoy creando mi primera biblioteca Typescript que exporta algunas funciones.
La estructura del proyecto es esta:
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 es:
export { sayHello } from './lib' lib/index.ts es:
export function sayHello() { console.log('Hello') }(Obviamente, esto es solo un ejemplo fácil, lo importante es la estructura).
Decidí crear una página de demostración: creé la carpeta de demostración y, dentro de ella, creé index.html , index.ts , style.css .
Entonces decidí usar Parcel como empaquetador. Tenga en cuenta que soy un desarrollador junior.
Entonces mi package.json es:
{ "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" } } Si ejecuto yarn build , la compilación se crea en la carpeta dist . Luego, usaría el archivo incluido y lo probaría en la página de demostración, por lo que mis archivos de demostración son:
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() Si ejecuto yarn start:demo , la página de demostración en http://localhost:1234/ no funciona: 404. Page not found . ¿Por qué?
Y luego, ¿cómo puedo crear un sitio público con el contenido de la página de demostración? Pienso implementarlo usando Netflify. ¿Qué tiene de malo la configuración de mi paquete.json?
Resumen: lo que me gustaría es crear una biblioteca que:
¡Muchas gracias!
Probé también:
"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" },pero no funciona
Ahora tengo:
... "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 y yarn start:demo funcionan pero cuando ejecuto yarn build:demo , obtengo:
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 construye por defecto todo lo que necesita en la carpeta dist hasta que especifiques otra usando el --dist-dir . Entonces, su problema aquí es que el comando de build producirá una carpeta dist como:
dist/main.js dist/module.js dist/index.d.ts Pero cuando ejecuta start:demo , el paquete también compila los archivos en dist :
dist/index.125bf0c5.js dist/index.html dist/main.js dist/module.js dist/index.d.ts Aquí viene la parte extraña, si elimina la carpeta dist y vuelve a ejecutar los pasos de compilación, los archivos start:demo ya no se agregan (parece un error). Por lo tanto, index.html no se encontrará.
Para solucionar este problema, le sugiero que separe las diferentes carpetas dist : dist solo para la biblioteca y dist-demo para el sitio web (prod y dev):
"build": "parcel build", "start:demo": "parcel ./demo/index.html --dist-dir dist-demo",