2025年js 前端导出报错格式不正确_一文搞懂前端工程模块化（上）

科技前沿 • 2025-02-24 20:44 • 阅读 29

大家好，我是讯享网，很高兴认识大家。

传统开发模式对主要问题 命名冲突，多个js文件之间，如果存在多个重名的变量，则会发送变量覆盖问题。文件依赖，js文件之间无法相互引用。

通过模块化解决 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。

Require.js（http://www.requirejs.com）

Sea.js（https://seajs.github.io/seajs/docs/）

以上两个已经落伍了

在 ES6 模块化规范诞生之前，JavaScript社区已经尝试并提出了 AMD、CMD、CommonJS等模块化规范。

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准，例如： - AMD 和 CMD 适用于浏览器端的JavaScript 模块化 - CommonJS适用于服务器端的JavaScript模块化

因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义： - 每个js文件都是一个独立的模块 - 导入模块成员使用 import 关键字 - 暴露模块成员使用 export 关键字

Node中默认支持CommonJS这个服务器端的模块化规范，但是对ES6的模块化，Node支持的并不是很好。通常需要使用babel这个插件在node中体验ES6的模块化特性。

babel是一个语法转换工具，它可以把高级的有兼容性的JavaScript代码转换成低级的没有兼容性的JavaScript代码。

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/preset-env @babel/node

npm install --save @babel/polyfill

以上命令局部安装（项目本地安装，这样会比较好，全局安装会对所有包都产生依赖，不利于开发）一个项目安装一个，需要就安装，切忌全局安装。

项目根目录创建文件 babel.config.js

babel.config.js 文件内容如下方代码所示，target中表示至少要支持的浏览器

const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ]; module.exports = {presets};

讯享网

2025年js 前端导出报错 格式不正确_一文搞懂前端工程模块化（上）