2024年最新关于前端模块化开发你不可不知的那些事，蚂蚁金服Web前端架构面试题

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 重命名导出

export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名

export const { name1, name2: bar } = o;

// 默认导出

export default expression;

export default function (…) { … } // also class, function*

export default function name1(…) { … } // also class, function*

export { name1 as default, … };

// 合并 modules

export * from …; // does not set the default export

export * as name1 from …;

export { name1, name2, …, nameN } from …;

export { import1 as name1, import2 as name2, …, nameN } from …;

export { default } from …;

import

================================================================

• 静态的 import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ，导入的模块都运行在严格模式下。在浏览器中，import 语句只能在声明了 type=“module” 的 script 的标签中使用。

• 此外，还有一个类似函数的动态 import()，它不需要依赖 type=“module” 的 script 标签。

• 在 script 标签中使用 nomodule 属性，可以确保向后兼容。

• 在您希望按照一定的条件或者按需加载模块的时候，动态 import() 是非常有用的。而静态型的 import 是初始化加载依赖项的最优选择，使用静态 import 更容易从代码静态分析工具和 tree shaking 中受益。

// 导入整个模块的内容

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

// 导入单个接口

import {myExport} from ‘/modules/my-module.js’;

// 导入多个接口

import {foo, bar} from ‘/modules/my-module.js’;

// 导入带有别名的接口

import {reallyReallyLongModuleExportName as shortName} from ‘/modules/my-module.js’;

// 导入时重命名多个接口

import {

reallyReallyLongModuleMemberName as shortName,

anotherLongModuleName as short

} from ‘/modules/my-module.js’;

// 仅为副作用而导入一个模块

// 整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。 这将运行模块中的全局代码, 但实际上不导入任何值。

import ‘/modules/my-module.js’;

// 导入默认值

import myDefault from ‘/modules/my-module.js’;

import myDefault, * as myModule from ‘/modules/my-module.js’;

// myModule used as a namespace

import myDefault, {foo, bar} from ‘/modules/my-module.js’;

// specific, named imports

// 动态import

import(‘/modules/my-module.js’)

.then((module) => {

// Do something with the module.

});

let module = await import(‘/modules/my-module.js’);

node 环境下

==================================================================

es module 使用

---

index.js

// 第一，将文件的扩展名由 .js 改为 .mjs；

// 第二，启动时需要额外添加 --experimental-modules 参数；

import { foo, bar } from ‘./module.mjs’;

console.log(foo, bar);

// 此时我们也可以通过 esm 加载内置模块了

import fs from ‘fs’;

fs.writeFileSync(‘./foo.txt’, ‘es module working’);

// 也可以直接提取模块内的成员，内置模块兼容了 ESM 的提取成员方式

import { writeFileSync } from ‘fs’;

writeFileSync(‘./bar.txt’, ‘es module working’);

// 对于第三方的 NPM 模块也可以通过 esm 加载

import _ from ‘lodash’;

_.camelCase(‘ES Module’);

// 不支持，因为第三方模块都是导出默认成员

// import { camelCase } from ‘lodash’

// console.log(camelCase(‘ES Module’))

与 CommonJS 交互

---

• ES Module 中可以导入 CommonJS 模块

• CommonJS 中不能导入 ES Module 模块

• CommonJS 始终只会导出一个默认成员

• 注意 import 不是解构导出对象

commonjs.js

// CommonJS 模块始终只会导出一个默认成员

module.exports = {

foo: ‘commonjs exports value’

}

exports.foo = ‘commonjs exports value’

// 不能在 CommonJS 模块中通过 require 载入 ES Module

const mod = require(‘./es-module.mjs’)

console.log(mod)

es-module.mjs

// ES Module 中可以导入 CommonJS 模块

import mod from ‘./commonjs.js’

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

es-module.mjs

// ES Module 中可以导入 CommonJS 模块

import mod from ‘./commonjs.js’

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-nzgOuZ78-1715742459287)]