javascript - Γιατί ένα δυναμικά εισαγόμενο ESModule επιστρέφει JSON, ενώ το module εξάγει μόνο απλό κείμενο;

Είμαι αρκετά εξοικειωμένος με τα ES2015 Modules, αλλά, αυτή τη στιγμή, ταυτόχρονα, προσπαθώ να κατανοήσω:

• Heroku

• Deno

• Oak

• TypeScript

Είμαι σίγουρος ότι έχω παραβλέψει κάτι στοιχειώδες εδώ, αλλά δεν μπορώ να το βρω.

Έχω δύο εκδόσεις ενός προτύπου, οι οποίες φαίνονται έτσι:

πρότυπο-στατικό.ts

import page from './page.ts';

let template = page;  // Normally, the template will add a lot more to page

export default template;

πρότυπο-δυναμικό.ts

const page = await import('./page.ts');

let template = page;  // Normally, the template will add a lot more to page

export default template;

Σε αυτήν τη ρύθμιση δοκιμής, κάθε πρότυπο (είτε χρησιμοποιεί στατικό είτε δυναμικό εισαγωγής) εισάγει το ίδιο module:

σελίδα.ts

let page = `

  <h1>Test Page</h1>
  <p>This is the <strong>Test Page</strong>.</p>
  <ul>
    <li>Go to the <a href="/test-page-static-import/">Test Page (static import)</a> Page</li>
    <li>Go to the <a href="/test-page-dynamic-import/">Test Page (dynamic import)</a> Page</li>
  </ul>
`;

export default page;

Τέλος, έχω τον ακόλουθο HTTP Server (χρησιμοποιώντας Oak):

server.ts

import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import * as flags from 'https://deno.land/std/flags/mod.ts';

import templateStatic from './template-static.ts';
import templateDynamic from './template-dynamic.ts';

const {args} = Deno;
const DEFAULT_PORT = 8080;
const argPort = flags.parse(args).port;
const port = argPort ? Number(argPort) : DEFAULT_PORT;

const app = new Application();
const router = new Router();

app.use(router.routes());
app.use(router.allowedMethods());


router.get('/test-page-static-import', ({ response }: { response: any }) => {
    response.status = 200;
    response.headers.set('Content-Type', 'text/html');
    response.body = templateStatic;
});


router.get('/test-page-dynamic-import', ({ response }: { response: any }) => {
    response.status = 200;
    response.headers.set('Content-Type', 'text/html');
    response.body = templateDynamic;
});

console.log(`Server is running on port ${port}`)

await app.listen({ port });

Όταν αναπτύσσω την εφαρμογή στο Heroku, λειτουργεί, αλλά με τα παρακάτω αποτελέσματα:

/δοκιμαστική-σελίδα-στατική-εισαγωγή

  <h1>Test Page</h1>
  <p>This is the <strong>Test Page</strong>.</p>
  <ul>
    <li>Go to the <a href="/test-page-static-import/">Test Page (static import)</a> Page</li>
    <li>Go to the <a href="/test-page-dynamic-import/">Test Page (dynamic import)</a> Page</li>
  </ul>

/test-page-dynamic-import

{"default":"\n\n  <h1>Test Page</h1>\n  <p>This is the <strong>Test Page</strong>.</p>\n  <ul>\n    <li>Go to the <a href=\"/test-page-static-import/\">Test Page (static import)</a> Page</li>\n    <li>Go to the <a href=\"/test-page-dynamic-import/\">Test Page (dynamic import)</a> Page</li>\n  </ul>\n"}

Μου είναι σαφές ότι το πρότυπο που χρησιμοποιεί στατική εισαγωγή εισάγει plaintext και το σερβίρει ως text/html, ενώ το πρότυπο που χρησιμοποιεί δυναμική εισαγωγή εισάγει JSON και το σερβίρει ως text/html.

Γιατί η δυναμική import() επιστρέφει JSON;

Απάντηση #1

Ο λόγος είναι ότι η τιμή επιστροφής ενός δυναμικού import δεν είναι το προκαθορισμένο import όπως το περιμένετε, αλλά ένα αντικείμενο που το περιτυλίγει.

Δώστε προσοχή στο παράδειγμα στην τεκμηρίωση του webpack για δυναμική εισαγωγή.

return import('lodash')
    .then(({ default: _ }) => {
      const element = document.createElement('div');

      element.innerHTML = _.join(['Hello', 'webpack'], ' ');

Αν θέλετε να έχετε πρόσβαση στην προεπιλεγμένη εισαγωγή από ένα δυναμικά εισαγόμενο αρχείο, πρέπει να έχετε πρόσβαση σε αυτή μέσω resolvedPromise.default.

Στην περίπτωσή σας, μπορείτε να έχετε πρόσβαση στην προεπιλεγμένη εισαγωγή από το page.ts ως εξής:

const { default: page } = await import('./page.ts');

let template = page;

export default template;