Javascript import file as string

import

The static import declaration is used to import read-only live bindings which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be re-assigned by the importing module.

In order to use the import declaration in a source file, the file must be interpreted by the runtime as a module. In HTML, this is done by adding type=»module» to the tag. Modules are automatically interpreted in strict mode.

There is also a function-like dynamic import() , which does not require scripts of type=»module» .

Syntax

import defaultExport from "module-name"; import * as name from "module-name"; import  export1 > from "module-name"; import  export1 as alias1 > from "module-name"; import  default as alias > from "module-name"; import  export1, export2 > from "module-name"; import  export1, export2 as alias2, /* … */ > from "module-name"; import  "string name" as alias > from "module-name"; import defaultExport,  export1, /* … */ > from "module-name"; import defaultExport, * as name from "module-name"; import "module-name"; 

Name that will refer to the default export from the module. Must be a valid JavaScript identifier.

The module to import from. The evaluation of the specifier is host-specified. This is often a relative or absolute URL to the .js file containing the module. In Node, extension-less imports often refer to packages in node_modules . Certain bundlers may permit importing files without extensions; check your environment. Only single quoted and double quoted Strings are allowed.

Name of the module object that will be used as a kind of namespace when referring to the imports. Must be a valid JavaScript identifier.

Name of the exports to be imported. The name can be either an identifier or a string literal, depending on what module-name declares to export. If it is a string literal, it must be aliased to a valid identifier.

Names that will refer to the named imports. Must be a valid JavaScript identifier.

Description

import declarations can only be present in modules, and only at the top-level (i.e. not inside blocks, functions, etc.). If an import declaration is encountered in non-module contexts (for example, tags without type=»module» , eval , new Function , which all have «script» or «function body» as parsing goals), a SyntaxError is thrown. To load modules in non-module contexts, use the dynamic import syntax instead.

All imported bindings cannot be in the same scope as any other declaration, including let , const , class , function , var , and import declaration.

import declarations are designed to be syntactically rigid (for example, only string literal specifiers, only permitted at the top-level, all bindings must be identifiers), which allows modules to be statically analyzed and linked before getting evaluated. This is the key to making modules asynchronous by nature, powering features like top-level await.

There are four forms of import declarations:

• Named import: import < export1, export2 >from «module-name»;
• Default import: import defaultExport from «module-name»;
• Namespace import: import * as name from «module-name»;
• Side effect import: import «module-name»;

Below are examples to clarify the syntax.

Named import

Given a value named myExport which has been exported from the module my-module either implicitly as export * from «another.js» or explicitly using the export statement, this inserts myExport into the current scope.

import  myExport > from "/modules/my-module.js"; 

You can import multiple names from the same module.

import  foo, bar > from "/modules/my-module.js"; 

You can rename an export when importing it. For example, this inserts shortName into the current scope.

import  reallyReallyLongModuleExportName as shortName > from "/modules/my-module.js"; 

A module may also export a member as a string literal which is not a valid identifier, in which case you must alias it in order to use it in the current module.

// /modules/my-module.js const a = 1; export  a as "a-b" >; 

import  "a-b" as a > from "/modules/my-module.js"; 

Note: import < x, y >from «mod» is not equivalent to import defaultExport from «mod» and then destructuring x and y from defaultExport . Named and default imports are distinct syntaxes in JavaScript modules.

Default import

Default exports need to be imported with the corresponding default import syntax. The simplest version directly imports the default:

import myDefault from "/modules/my-module.js"; 

Since the default export doesn’t explicitly specify a name, you can give the identifier any name you like.

It is also possible to specify a default import with namespace imports or named imports. In such cases, the default import will have to be declared first. For instance:

import myDefault, * as myModule from "/modules/my-module.js"; // myModule.default and myDefault point to the same binding 

import myDefault,  foo, bar > from "/modules/my-module.js"; 

Importing a name called default has the same effect as a default import. It is necessary to alias the name because default is a reserved word.

import  default as myDefault > from "/modules/my-module.js"; 

Namespace import

The following code inserts myModule into the current scope, containing all the exports from the module located at /modules/my-module.js .

import * as myModule from "/modules/my-module.js"; 

Here, myModule represents a namespace object which contains all exports as properties. For example, if the module imported above includes an export doAllTheAmazingThings() , you would call it like this:

myModule is a sealed object with null prototype. The default export available as a key called default . For more information, see module namespace object.

Note: JavaScript does not have wildcard imports like import * from «module-name» , because of the high possibility of name conflicts.

Import a module for its side effects only

Import an entire module for side effects only, without importing anything. This runs the module’s global code, but doesn’t actually import any values.

This is often used for polyfills, which mutate the global variables.

Examples

Standard Import

In this example, we create a re-usable module that exports a function to get all primes within a given range.

// getPrimes.js /** * Returns a list of prime numbers that are smaller than `max`. */ export function getPrimes(max)  const isPrime = Array.from( length: max >, () => true); isPrime[0] = isPrime[1] = false; isPrime[2] = true; for (let i = 2; i * i  max; i++)  if (isPrime[i])  for (let j = i ** 2; j  max; j += i)  isPrime[j] = false; > > > return [. isPrime.entries()] .filter(([, isPrime]) => isPrime) .map(([number]) => number); > 

import  getPrimes > from "/modules/getPrimes.js"; console.log(getPrimes(10)); // [2, 3, 5, 7] 

Imported values can only be modified by the exporter

The identifier being imported is a live binding, because the module exporting it may re-assign it and the imported value would change. However, the module importing it cannot re-assign it. Still, any module holding an exported object can mutate the object, and the mutated value can be observed by all other modules importing the same value.

You can also observe the new value through the module namespace object.

// my-module.js export let myValue = 1; setTimeout(() =>  myValue = 2; >, 500); 

// main.js import  myValue > from "/modules/my-module.js"; import * as myModule from "/modules/my-module.js"; console.log(myValue); // 1 console.log(myModule.myValue); // 1 setTimeout(() =>  console.log(myValue); // 2; my-module has updated its value console.log(myModule.myValue); // 2 myValue = 3; // TypeError: Assignment to constant variable. // The importing module can only read the value but can't re-assign it. >, 1000); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• export
• Dynamic imports
• import.meta
• Limin Zhu, Brian Terlson and Microsoft Edge Team: Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• Hacks blog post by Jason Orendorff: ES6 in Depth: Modules
• Hacks blog post by Lin Clark: ES modules: A cartoon deep-dive
• Axel Rauschmayer’s book: «Exploring JS: Modules»
• The Modern JavaScript Tutorial(javascript.info): Export and Import

Found a content problem with this page?

This page was last modified on Jul 3, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

The Quick and Easy Guide to Importing Files as JavaScript Strings

JavaScript is a popular programming language that is widely used for building web applications. One of the most common tasks you might have to do in JavaScript is importing files as strings. This is especially useful when you need to load external data, such as images or configuration files, into your application.

In this quick and easy guide, we will show you how to import files as JavaScript strings in just a few simple steps.

Step 1: Create a JavaScript file

The first step is to create a new JavaScript file. You can do this using any text editor or integrated development environment (IDE).

Step 2: Create a file to import

Next, create a file that you want to import into your JavaScript code. This file can be any type of file, such as a text file, JSON file, or image file.

Step 3: Use node.js to import file

To import the file into your JavaScript code, you can use the fs module in node.js. This module provides a simple way to read files from the file system.

// index.js const fs = require('fs'); const path = require('path'); // Set the path to your file const filePath = path.join(__dirname, 'data.json'); // Read the file and convert to a string const fileString = fs.readFileSync(filePath, 'utf8'); console.log(fileString); 

In the example above, we use the readFileSync method to read the contents of the file and convert it to a string. We also use the path.join method to create the correct file path, regardless of the operating system.

Step 4: Import file as JavaScript module

If you want to import the file as a JavaScript module, you can use the import statement. This is only available in modern browsers that support ECMAScript 6 (ES6) or higher.

// data.js export default < "name": "John Doe", "email": "john.doe@example.com" >// index.js import data from './data.js'; console.log(data); 

In the example above, we export the data from the data.js file as a default export, and then import it in the index.js file using the import statement.

Conclusion

Importing files as JavaScript strings is a common task in web development. By following the steps outlined in this guide, you can quickly and easily import files into your JavaScript code as strings or modules.

Источник