![]() ![]() There’s no single right answer, so the compiler must be told the rules through configuration options. Consequently, the way TypeScript should answer the questions above can vary dramatically depending on where the code is intended to run. So runtimes and bundlers, especially those that want to support both ESM and CJS, have a lot of freedom to design their own rules. The ECMAScript specification defines how ESM imports and exports link up with each other, but it doesn’t specify how the file lookup in (4), known as module resolution, happens, and it doesn’t say anything about other module systems like CommonJS. Notice that all of these questions depend on characteristics of the host-the system that ultimately consumes the output JavaScript (or raw TypeScript, as the case may be) to direct its module loading behavior, typically either a runtime (like Node.js) or bundler (like Webpack). Once the "greetings" module has been analyzed, what piece of that module is bound to sayHello?.Does the module system allow the kind of module detected in (2) to reference the kind of module detected in (5) with the syntax decided in (3)?.What kind of module is the file resolved by that lookup?. ![]() Where will the module system look to find the module specified by "greetings"? Will the lookup succeed?.If output JavaScript is being emitted, how will the module syntax present in this file be transformed in the output code?.What kind of module does the module system expect to find, given the file name it will load and its location on disk?.Will the module system load this TypeScript file directly, or will it load a JavaScript file that I (or another compiler) generate from this TypeScript file?.To check this file, the compiler needs to know the type of sayHello (is it a function that can accept one string argument?), which opens quite a few additional questions: It uses dedicated import and export syntax: There are many module systems, and TypeScript supports emitting several, but this documentation will focus on the two most important systems today: ECMAScript modules (ESM) and CommonJS (CJS).ĮCMAScript Modules (ESM) is the module system built into the language, supported in modern browsers and in Node.js since v12. In particular, all scripts loaded onto the same page share the same scope-appropriately called the “global scope”-meaning the scripts had to be very careful not to overwrite each others’ variables and functions.Īny system that solves this problem by giving files their own scope while still providing a way to make bits of code available to other files can be called a “module system.” (It may sound obvious to say that each file in a module system is called a “module,” but the term is often used to contrast with script files, which run outside a module system, in a global scope.) This approach had some downsides, especially as web pages grew larger and more complex.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |