前端工程师必备：JavaScript中实现模块化开发的外部JS引用指南-嘻道妙招

你写的JS代码是不是经常变成意大利面条？变量到处乱窜，函数互相打架，改个功能要翻20个文件？这就是没搞懂模块化开发吃的亏！今天咱们来聊聊这个让无数前端工程师又爱又恨的话题——怎么优雅地引用外部JS模块。

（这里悄悄插句实话：去年我接手个老项目，光找某个变量的出处就花了3小时，最后发现它在第8层嵌套的JS文件里被意外修改了...）

??模块化到底是个啥？??
简单说就像搬家时用纸箱分类打包。把相册放A箱，餐具放B箱，需要什么直接搬整个箱子。对应到代码里，就是把相关功能封装成独立模块，用export装箱，用import拆箱。

??为啥非要模块化？??
举个例子：你和小王同时开发购物车模块。他用var定义了个total变量，你在另一个文件也用var total，得，直接互相覆盖！模块化的作用就是给每个箱子贴封条，??避免全局变量污染??。

??历史包袱怎么来的？??
早些年JS压根没模块化概念，直到2015年ES6推出import/export语法。但现实很骨感——现在还有16%的网站用着古董级的IIFE（立即执行函数）来实现模块化（数据来源：WebAlmanac 2023）。

??怎么选模块化方案？??
看这个对比表就懂了：

（上周有个哥们把CommonJS语法直接用在浏览器里，结果页面直接白屏，排查了俩小时...）

??循环依赖怎么破？??
假设A模块引用了B，B又反过来引用A，这就形成了死循环。教你个野路子——??动态导入??：

javascript复制// 在模块B里这么写
let aModule = await import('./a.js');

不过更推荐的做法是重构代码结构，毕竟循环依赖就像先有鸡还是先有蛋，容易把自己绕进去。

??路径别名老写错咋办？??
在vite.config.js里加这段配置：

javascript复制resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

现在可以直接用import Button from '@/components/Button'，再也不用计算../../的层数了。

??如果浏览器报错怎么办？??
八成是没加type="module"属性。正确的script标签应该长这样：

html运行复制<script type="module" src="main.js">script>

注意！这时候就不能用file://协议直接打开网页了，必须启本地服务器。

??第三方库怎么特殊处理？??
遇到老旧的jQuery插件，在vue.config.js里配置：

javascript复制configureWebpack: {
  externals: {
    jquery: 'jQuery'
  }
}

这样webpack打包时就不会把jQuery塞进你的代码里。

??性能优化怎么做？??
记住三个数字：??300KB、5秒、3次请求??。单个模块别超过300KB，首屏加载控制在5秒内，同域名下JS请求不超过3次。超出的话考虑用??动态导入??：

javascript复制const loginModule = () => import('./loginForm.js');

说个真事儿：去年用webpack打包时，因为手贱在循环里写require，导致生成150个冗余模块。最后发现是用了??错误的热更新配置??，直接让构建时间从30秒暴涨到3分钟。现在我的原则是——能用ES6原生模块就别上打包工具，项目大了再考虑webpack。

最近发现个骚操作：在Chrome控制台输入import('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js')，居然能直接调试线上模块！不过千万别在生产环境这么玩，安全性堪比裸奔。

最后甩个绝招：在package.json里加个??浏览器字段??，能指定模块的入口文件：

json复制"browser": {
  "./node_modules/old-module/index.js": "./src/shims/old-module.js"
}

这个技巧救过我三次，特别是处理那些不兼容现代打包工具的祖传库时。

本文由嘻道妙招独家原创，未经允许，严禁转载

前端工程师必备：JavaScript中实现模块化开发的外部JS引用指南