前端工程化

1、CMJ和ESM

1)commonjs和es6的区别?

  • CMJ是社区标准,ESM是官方标准;
  • CMJ是使用函数实现模块化的,ESM使用新语法实现模块化(import, export);
  • CMJ是动态依赖,同步执行;ESM既支持动态也支持静态,动态依赖是异步执行的;
  • CMJ仅在node环境中支持,ESM支持各种环境;
  • CMJ只是普通的函数调用和赋值,ESM导入时有符号绑定(如果模块的变量值发生变化,导入的模块会感知到这一变化)。

2)export和export default的区别?

  • export导出,也叫做具名导出,它的导出必须带有命名,在导出的模块对象中,命名即为模块对象的属性名,一个模块可有多个具名导出;
  • export default为默认导出,在模块对象中名称固定为default,无需命名,在一个模块中只有哟个默认导出。

2、NPX

  1. npx webpack:

寻找本地工程下的node_modules/.bin/webpack,如果将命令配置到package.json的scripts中,可以省略npx

2)npx 包名:先会在node_modules里面查找,没有的话会下载,放到临时目录,后续可能删掉

3、ESLint

1)一个工具,预先配置好各种规则,甚至自动修复

2)基本使用:

  • 安装eslint (npm i -D eslint )
  • 配置检查文件(./eslintrc ./eslintrc.js ./eslintrc.yml)(rules属性里面配置)
  • 安装插件eslint,在vscode里面可以自动检测
  • 引用别人自定义规则(npm i -D eslint-config-airbnb, 配置文件添加extends:'airbnb')
  • 检查单个文件 npx eslint ./src/index.js
  • eslintrc配置文件的模块(root, env,extends,parserOptions,rules)

4、webpack相关问题

1)webpack scope hosting:内置的优化,针对模块的优化,在生产环境打包时会自动开启。

未开启时,会将每个模块代码放置到一个独立的函数环境中,保证了模块作用域互不干扰;

开启之后会将多个模块的代码合并到一个函数环境,这样可以减少函数的调用,对运行效率有一定的提升,降低了打包体积。

开启的前提时,没有遇到某些模块多次被引用,没有动态导入的模块,或者是ESM模块

相关推荐
shawxlee4 分钟前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户0595401744632 分钟前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹37 分钟前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen42 分钟前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱43 分钟前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
郝亚军2 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
IT_陈寒2 小时前
React的useEffect依赖项把我坑惨了
前端·人工智能·后端
东方小月3 小时前
从零开发一个Coding Agent:monorepo项目搭建
前端·后端·node.js
葬送的代码人生3 小时前
别再让 AI 瞎写代码了!Vibe Coding 三步法教你写出靠谱代码
前端·设计模式·架构
Shirley~~3 小时前
Code-Review-Graph:面向 AI 辅助代码审查的结构化上下文引擎
前端·ai编程