Importer Typescript/JSX-kode direkte fra npm-pakke

Jeg prøver å lage en veldig enkel tilpasset npm-pakke som skal importeres i en Typescript React-app (laget med CRA).

React-app ALPHA:

import {MyText} from 'custom-package';
function App() {
   return (
      <div>
         {MyText()}
      </div>  
  );
}

Nå inneholder node_modules/custom-package package.json og index.ts:

index.ts

export const myText=():string=>'Hello world';

Koden ovenfor gir meg følgende feil: Du kan trenge en ekstra loader for å håndtere resultatet...

1. Hvorfor klarer ikke React-appen å analysere den importerte Typescript-koden? Hvorfor må jeg transpile den til JS?

Min tanke var at Webpack i ALPHA-appen ville ta over den koden. Er det ikke Webpack som tar over i tilfelle av 'export' og 'import'? For eksempel fungerer følgende:

index.js

export const myText=()=>'Hello world';

2. Det er Webpack som kompilerer 'export' i eksemplet ovenfor. Ellers ville ikke nettleseren gjenkjent det med mindre vi definerer <script type='module'>. Har jeg rett? Hvis ja, hvorfor kompilerer ikke Webpack index.ts også?

Jeg håper du forsto poenget mitt. Så,

3. Er det mulig å importere direkte Typescript eller til og med JSX-kode, og hvordan?

Svar #1

Svar på hvert punkt i sin opprinnelige form:

1. Hvorfor klarer ikke React-appen å analysere den importerte Typescript-koden? Hvorfor må jeg transpile den til JS?

Webpack har det som kalles en loader-kjede for filer; disse loaderne spesifiseres i webpack.config.js på et delsett av filer, vanligvis etter filtype og plassering i prosjektet.

For din sak er node_modules mest sannsynlig ikke transpilet fordi:

  1. ikke alle apper bruker Typescript. I stor grad gjør de det ikke.
  2. de fleste biblioteksforfattere gir et "main"-felt i sin package.json som peker til en fil som allerede er transpilert før opplasting til npm
  3. node_modules pleier å være større (mye større) enn prosjektkoden, og det er ikke i noens interesse å la webpack analysere alt dette ved hver prosjekbygging.

2. Det er Webpack som kompilerer 'export' i eksemplet ovenfor. Ellers ville ikke nettleseren gjenkjent det med mindre vi definerer <script type='module'>. Har jeg rett? Hvis ja, hvorfor kompilerer ikke Webpack index.ts også?

Hva webpack gjør (men igjen, avhengig av konfigurasjon) er at den pakker alle filer sammen slik (forenklet):

var files = { 
   1: () => { /* transpiled code of some file */ },  
   2: () => { var myLib = require(1); /* transpiled code of some other file */ },  
   /* ...so on */
}

var require = function(id) { return files[id]() }

Det er tydelig her at exports ikke lenger betyr noe, ettersom all kode har blitt bundlet sammen; ellers er det sannsynlig at webpack ikke vil parse typescript på grunn av grunnene beskrevet i #1.

3. Er det mulig å importere direkte Typescript eller til og med JSX-kode, og hvordan?

Det er mulig, men det vil sannsynligvis redusere byggehastigheten. Dette kan oppnås ved å utvide .ts-lasterne til node_modules, eller i det minste node_modules/custom-package:

  1. lokalisere webpack.config.js

  2. enten fjern exclude: /node_modules/, hvis du finner noen fra en loaders-blokk som håndterer ts-filer, eller,

  3. legg til de samme lastene til node_modules -

    module: {
  rules: [
    {
      test: /\.tsx?$/,
      include: /node_modules/,
      loader: 'ts-loader',
    },
  ],
},

Relaterte artikler