Zoeken op website

javascript - Hoe node-modules te importeren in eenvoudige TypeScript

Ik ben nieuw in TypeScript en ik probeer gewoon een module op te nemen die importeert vanuit een node-module. Ik gebruik geen webpack of andere bouwtools omdat ik dit zo eenvoudig mogelijk wil houden om te begrijpen.

Dit is mijn structuur:

/node_modules    -- contains node modules I want to import in main.ts
/scripts/ts/main.ts
/scripts/main.js -- the transpiled main.ts file
/index.html      -- includes the module script tag for scripts/main.js
/package.json
/tsconfig.json

Dit is mijn tsconfig.json:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES2015",
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "outDir": "scripts",
        "moduleResolution": "Node",
        "experimentalDecorators": true
    },
    "$schema": "https://json.schemastore.org/tsconfig",
    "exclude": [],
    "include": [
        "scripts/ts/**/*"
    ]
}

Mijn main.ts-bestand heeft deze imports:

import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

Het main.ts-bestand wordt getranspileerd en main.js wordt succesvol geladen. Maar ik krijg deze fout:

Uncaught TypeError: Failed to resolve module specifier "lit". Relative references must start with either "/", "./", or "../".

De importverklaringen worden "as is" getranspileerd. Ze zien er exact hetzelfde uit in het getranspileerde bestand, dus ik denk dat het probleem is dat het modulepad verkeerd is: de browser weet niet dat "lit" in "node_modules/lit" zit en wanneer ik het pad handmatig wijzig in het getranspileerde bestand naar ../node_modules/lit/index.js, krijg ik een andere fout die is

Uncaught TypeError: Failed to resolve module specifier "@lit/reactive-element". Relative references must start with either "/", "./", or "../".

Wat ik me voorstel is een module die verder naar beneden in de hiërarchie door andere lit-modules wordt geïmporteerd. Eigenlijk worden mijn importpaden niet correct getranspileerd en ik weet niet wat ik moet doen. Alle hulp zou geweldig zijn!

Antwoord #1

Dank aan @cdimitroulas dat hij me hieraan heeft laten denken.

ES6-imports moeten een absoluut of relatief pad hebben - "platte node-imports" werken gewoon niet en deze paden moeten op de een of andere manier worden opgelost, niet alleen voor de imports van de hoofdmodule maar ook voor elke andere import van modules in de afhankelijkheidsgrafiek.

De Typescript-compiler behandelt dit niet en daarom miste de huidige setup een hulpmiddel dat deze paden zou oplossen (zoals web-dev-server) of de modules en al hun afhankelijkheden in één bestand zou bundelen (zoals webpack), waardoor de noodzaak om de paden op te lossen werd geëlimineerd.

Gerelateerde artikelen