[值得一看]JavaScript ES 模块：现代化前端编程必备技能

川长思鸟来 2022-12-20 12:34 136阅读 0赞

自从 ES 模块被添加到规范中后，JavaScript 中的模块就更加简单了。模块按文件分开，异步加载。导出是用 export 关键字定义的；值可以用 import 关键字导入。  
虽然导入和导出单个值的基础知识非常容易掌握和使用，但还有许多其他方法可以使用 ES 模块来使你的导入和导出按照你需要的方式工作。在本文中，我将介绍你可以在模块中导出和导入的所有方法。  
需要记住的一点是，导出和静态导入只能发生在模块的最外层。你不能从函数、if 语句或任何其他块中导出或静态导入。另外，动态导入可以在函数中完成，我们将在本文最后讨论它。  
导出  
默认导出  
每个模块都有一个 "默认 "导出，它代表了模块导出的主要值。可能会有更多的导出值，但默认导出值代表模块的定义。一个模块中只能有一个默认导出。  
const fruitBasket = new FruitBasket()

export default fruitBasket  
复制代码  
注意，在默认导出之前，我必须先定义该值。如果我想，我也可以立即导出我的值，而不把它分配给一个变量，但这样我就不能在导出的同时将其赋值给一个变量。  
我们可以默认导出一个函数声明和一个类声明，而不需要先把它分配给一个变量。  
export default function addToFruitBasket(fruit) \{  
// …  
\}  
复制代码  
我们甚至可以将字面值作为默认导出。  
export default 123  
复制代码  
命名导出  
任何变量声明都可以在创建时导出，这将创建一个 “命名导出”，使用变量名作为导出名。  
export const fruitBasket = new FruitBasket()  
复制代码  
我们还可以立即导出函数和类的声明。  
export function addToFruitBasket(fruit) \{  
// …  
\}  
export class FruitBasket \{  
// …  
\}  
复制代码  
如果我们想导出一个已经定义好的变量，我们可以通过大括号把变量名包装为对象来实现。  
const fruitBasket = new FruitBasket()

export \{ fruitBasket \}  
复制代码  
我们甚至可以使用 as 关键字来重命名我们的导出，使之与变量名不同。如果需要，我们还可以同时导出其他变量。  
const fruitBasket = new FruitBasket()  
class Apple \{\}

export \{ fruitBasket as basketOfFruit, Apple \}  
复制代码  
聚合导出  
我们还会经常遇到这种情况，就是从一个模块导入模块，然后立即导出这些值。比如这样：  
import fruitBasket from ‘./fruitBasket[.][]js’

export \{ fruitBasket \}  
复制代码  
当你要同时导入和导出很多东西时，这可能会变得很繁琐。ES 模块允许我们同时导入和导出多个值。  
export \* from ‘./fruitBasket.js’  
复制代码  
这将把 ./fruitBasket.js 中所有命名导出重新包装在一起再导出，但它不会导出默认导出值，因为一个模块只能有一个默认导出值。如果我们要导入和导出多个具有默认导出的模块，哪个值将成为导出模块的默认导出值呢？  
我们可以专门从其他文件中导出默认模块，或者在重新导出时为默认导出命名。  
export \{ default \} from ‘./fruitBasket.js’

// 或者

export \{ default as fruitBasket \} from ‘./fruitBasket.js’  
复制代码  
我们也可以有选择地从另一个模块导出不同的项目，而不是把所有的项目都重新导出。在这种情况下，我们也使用大括号。  
export \{ fruitBasket as basketOfFruit, Apple \} from ‘./fruitBasket.js’  
复制代码  
最后，我们可以使用 as 关键字将整个模块打包成一个单独的命名导出。假设我们有以下文件：  
// fruits.js  
export class Apple \{\}  
export class Banana \{\}  
复制代码  
现在我们可以将其打包成一个单独的导出对象，这个对象包含了所有命名导出和默认导出对象。  
export \* as fruits from ‘./fruits.js’  
// \{ Apple: class Apple, Banana: class Banana \}  
复制代码  
导入  
默认导入  
当导入一个默认值时，我们需要给它指定一个名字。既然是默认值，我们给它取什么名字并不重要。  
import fruitBasketList from ‘./fruitBasket.js’  
复制代码  
我们也可以同时导入所有的导出，包括命名导出和默认导出。这将会把所有的导出放到一个对象中，而默认导出将被赋予 "default "的属性名。  
import \* as fruitBasket from ‘./fruitBasket.js’  
// \{ default: fruitBasket \}  
复制代码  
命名导入  
我们可以通过用大括号包装导出的名称来导入任何命名导出。  
import \{ fruitBasket, Apple \} from ‘./fruitBasket.js’  
复制代码  
我们也可以在导入时使用 as 关键字重命名导入。  
import \{fruitBasket as basketOfFruit, Apple\} from ‘./fruitBasket.js’  
复制代码  
我们也可以在同一个导入语句中混合命名导出和默认导出。默认导出的内容会先列出，然后是大括号内的命名导出内容。  
import fruitBasket, \{ Apple \} from ‘./fruitBasket.js’  
复制代码  
副作用导入  
有时候一个模块并没有导出值，我们只希望把该模块导入进来立即执行。导入这样的一个模块时，不需要在文件中列出任何导出值。这被称为”副作用(side-effect)“导入，它将直接执行模块中的代码而不提供任何导出值。  
import ‘./fruitBasket.js’  
复制代码  
动态导入  
有时我们在导入文件之前并不知道文件的名称。或者我们在执行代码到一半的时候才需要导入一个文件，我们可以使用动态导入在代码中的任何位置导入模块。之所以称之为 “动态”，是因为导入的路径可能是不确定的，可以是字符串变量也可以是字符串表达式，而不像静态导入那样必须是一个字符串字面量。  
由于 ES 模块是异步的，所以模块不会立即可用。我们必须等待它被加载后才能对它做事情。正因为如此，动态导入会返回一个解析模块的 Promise。  
async function createFruit(fruitName) \{  
try \{  
const FruitClass = await import(`./${fruitName}.js`)  
\} catch \{  
console.error(‘Error getting fruit class module:’, fruitName)  
\}  
return new FruitClass()  
\}  
复制代码  
总结  
ES 导出的内容可以是值（包括变量和字面量）也可以是类和函数的声明，从导出方式上可以分为默认导出、命名导出和聚合导出。根据不同的导出方式，导入可以分为默认导入、命名导入、副作用导入和动态导入。命名导出和导入均可以使用 as 指定别名。导出和静态导入必须在文件的最外层，动态导入可以在代码的函数中异步完成。

[.]: http://www.wblawyer.cn/