exports和module.exports的适用误区
这次是前端精读期刊与大家第一次正式碰面，我们每周会精读并分析若干篇精品好文，试图讨论出结论性观点。没错，我们试图通过观点的碰撞，争做无主观精品好文的意见领袖。
但为什么要了解 Javascript 模块化发展的历史呢？因为凡事都有两面性，了解 Javascript 模块化规范，有利于我们思考出更好的模块化方案，纵观历史，从 1999 年开始，模块化方案最多维持两年，就出现了新的替代方案，比原有的模块化更清晰、强壮，我们不能被现代模块化方式限制住思维，因为现在的 ES2015 模块化方案距离发布也仅仅过了两年。
导语：本文带你去了解一下JavaScript模块化的前世今生，包括但不限于JavaScript模块化、模块化规范、模块加载器和模块打包工具等。本文不是一个深度剖析JavaScript模块相关话题的文章，仅是一个能够让你10分钟快速了解JavaScript模块化相关知识的介绍。 作者：徐江伟--腾讯前端工程师 @IMWeb前端社区 现在JavaScript技术的发展可能会让你应接不暇。身为一线搬砖工的你对雨后春笋般的前端工具和框架越来越疲于学习和暇接。有时候，你可能不自主的问，webpack是什么玩意？bro
初学Web前端要注意什么？如何学好JS模块化编程？JavaScript是前端三要素之一，也是很多初学Web前端的人遭遇的第一条拦路虎。很多同学表示JavaScript涵盖的知识点太多太复杂、应用也是五花八门完全摸不着头脑。但只要我们一点一点由基础到进阶的学习，就一定能学好JavaScript，接下来小编就给大家分享有关JavaScript模块化编程的知识。
如今的前端工作中，模块化开发成为主流，无论是前端还是后端，由于模块化开发为我们带来巨大的收益，因此开发者都在使用它。模块化开发部分的面试题主要考察应试者对几种模块化开发规范的了解，应试者要明白它们之间的异同点，以及所适用的场合。
关于模块和模块化，百度百科有一段引用自《Java应用架构设计：模块化模式与OSGi》一书的解释非常好：
常见的概括：模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护）。
伴随着互联网的飞速发展，web中对于前端的要求越来越高，前端的代码的代码量、复杂度与日俱增，带来了诸如前端代码复用率低，难维护等问题。针对这些现有问题，达观科技采用了requirejs框架，用模块化的思想去解决这些问题。(达观数据 施列宇) 一、什么是模块化 模块化是一种将复杂系统拆分成一个个小的可管理的模块的方式。它可以把系统拆分为职责更单一，更独立的模块，也就是我们软件设计中常常提到的高内聚低耦合的模块。一般来说，前端模块化包含javascript，css以及template三个部分。 二、为什么要将前
学习 Webpack 的原因 目前前端技术发展很快，引入了越来越多的思想、框架和工具 现阶段的大型应用就要求前端必须要有独立的项目，独立的项目想要有足够的效率就必须进行工程化。 具有复杂数据状态的应用
上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；
随着前端js代码复杂度的提高，JavaScript模块化这个概念便被提出来，前端社区也不断地实现前端模块化，直到es6对其进行了规范，下面就介绍JavaScript模块化。
技术的诞生是为了解决某个问题，模块化也是。 随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多. 在js模块化诞生之前，开发者面临很多问题:
前端发展到今天，已经有不少模块化的方案，比如AMD、CMD、UMD、CommonJS等，当然了，还有es6带来的模块系统，这些模块化规范的核心价值都是让 JavaScript 的模块化开发变得简单和自然，今天就来看看这些规范都是啥。 为什么要模块化 在模块化这东西没出来之前，前端脚本引用大概是这样的： <script src="module1.js"></script> <script src="module2.js"></script> <script src="libraryA.js"><
export = foo 是 ts 为了兼容 commonjs 创造的语法，它对应于 commonjs 中的 module.exports = foo。
后来有人尝试用对象的方式来书写逻辑模块，但是这种写法有自己的弊端，比如这样的写法暴露了所有的模块成员，模块中的属性有被外部代码更改的风险。
CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。 它的终极目标是提供一个类似Python，Ruby和Java标准库。 这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
node 模块化 JS 诞生的时候，仅仅是为了实现网页表单的本地校验和简单的 dom 操作处理。所以并没有模块化的规范设计。 项目小的时候，我们可以通过命名空间、局部作用域、自执行函数等手段实现变量不冲突。但是到了大一点的项目，各种组件，各种第三方插件和各种 js 脚步融合的时候，就会发现这些技巧远远不够。 模块化的演变 为什么要有 JS 模块化呢？在浏览器中，顶层作用域的变量是全局的，所以项目稍微复杂点，如果引用的 js 非常多的时候，很容易造成命名冲突，然后造成很大意想不到的结果。 为了避免全局污染，J
模块化这个问题并非一开始就存在，WWW 刚刚问世的时候，html，JavaScript，CSS（JS 和 CSS 都是后来在网景被引进浏览器的）都是极其简单的存在，不需要模块化。
通过require.js 可以对javascript文件进行别样引用 Require.js的使用： 第一步： 只需在html页面中引用require.js 就够了 第二步： 在引用require.js的时候，要设置async属性为ture 确保不会阻塞页面 第三步：单写一个js文件，用于引用相关的javascripnt文件，这个文件可以随便命名，一般叫main.js 第四步： 在引用require.js时，通过data-main属性指定main.js
export可以让我们把变量，函数，对象进行模块化，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个demo.js文件，然后在文件中输出一个模块变量。
webpack并不强制你使用某种模块化方案，而是通过兼容所有模块化方案让你无痛接入项目。有了webpack，你可以随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好的。
相对于其他静态语言，JS最大缺陷就是天生不具有模块化，没有语言层面的命名空间的概念。问题如下：
Browserify 是什么 Browserify 是一个浏览器端代码模块化的工具 为什么要使用 Browserify 浏览器端的代码模块化有2个明显的好处： 1）前端JS可以使用npm包 我们知道 npm 中有非常丰富的功能包，但没法在浏览器中直接用，因为他们是按照 nodejs 模块化标准写的，使用 require 和 module.exports 引用和构造模块，浏览器不支持此类语法，所以需要浏览器端模块化工具的支持，这样就相当于给浏览器端增加了 npm 库 2）模块化开发 现在前端J
现在回过头来想想，也许选择以《JavaScript权威指南》一书来作为入门有些不好，因为这本书毕竟是很早之前的，书中所讲的思想、标准也基本都只是 ES5 及那时代的相关技术。
模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。
从Cocos2d-js到Creator，一直以来都有模块裁剪的能力，可以将游戏中没有用到的功能代码，在编译输时移除，从而减少包体大小，这对H5游戏来说影响比较明显。Creator比Cocos2d-js做的更好，通过主菜单->项目设置->模块设置有一个图形化的界面，可以方便模块配置。
推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
在日益复杂和多元的Web业务背景下，前端工程化这个概念经常被提及。“说说你对Web工程化的理解？” 相信很多初学者在面试时会经常遇到，而大多数人脑子会直接浮现出 Webpack，认为工程化就是 Webpack 做的那些事情儿，当然也不能说不对，准确说 Webpack 只是工程化背景下产生的工具。
一、 为什么需要模块化 以前没有模块化时，我们可能会按如下方式划分模块： 通过 <script> 标签引入各个文件，把每个文件看成是一个模块，每个模块的接口通常是暴露在全局作用域下的，也就是定义在 window 对象中。 <script src="module1.js"></script> <script src="module2.js"></script> <script src="module3.js"></script> 如果通过这种方式做模块化，当项目变得越来越大时，很容易造成全局变量冲突，项目也会
require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。模块化是任何一个编程语言都会支持的设计，通过模块化能够将一个重要的问题拆分成一个个小的问题，并且模块与模块之间不关联（或者弱关联），减小的程序的开发难度。
大家都知道，在nodejs 中，引入模块用 require ; 而在react 与vue 等前端框架中，用的是import ;
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
注意：在请求多个模块的时候，一般将没有返回值的模块放在后面，有返回值的放在前面，这样就可以避免要为没有返回值的模块写形参！
上一篇《前端科普系列（2）：Node.js 换个角度看世界》，我们聊了 Node.js 相关的东西，Node.js 能在诞生后火到如此一塌糊涂，离不开它成熟的模块化实现，Node.js 的模块化是在 CommonJS 规范的基础上实现的。那 CommonJS 又是什么呢？
先说说什么是模块化，就是将独立的功能代码封装成一个独立的文件，其他模块需要使用，在进行引用。
在实际编写js脚本时，可能会遇到多个js脚本中变量或函数重复命名的情况，如果全部为全局变量，则在使用的时候会产生很多麻烦。因此出现了模块化的概念，即可以把每一个js脚本当作一个独立的模块，不同模块间的内容互不干扰，这样在实际使用起来的时候会避免很多不必要的麻烦。
在ES6前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库， 而像seaJS是基于CMD规范的模块化库， 两者都是为了为了推广前端模块化的工具。 现在ES6自带了模块化， 也是JS第一次支持module， 在很久以后 ，我们可以直接作用import和export在浏览器中导入和导出各个模块了， 一个js文件代表一个js模块。 现代浏览器对模块(module)支持程度不同， 目前都是使用babelJS， 或者Traceur把ES6代码转化为兼容ES5版本的js代码。 ES6的模块化的基本规则或特点： 1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象； 2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域； 3：模块内部的变量或者函数可以通过export导出； 4：一个模块可以导入别的模块 以上摘自（https://www.cnblogs.com/diligenceday/p/5503777.html）
随着互联网的飞速发展，前端开发越来越复杂。本文将从实际项目中遇到的问题出发，讲述模块化能解决哪些问题，以及如何使用 Sea.js 进行前端的模块化开发。
AngularJS模块化使用的并不是标准的AMD规范，AngularJS的风格风格大致是这样的：
CSS 早在 2.1 的版本就提出了 @import 来实现模块化，但是 JavaScript 直到 ES6 才出现官方的模块化方案 ES Module。尽管早期 JavaScript 语言规范上不支持模块化，但这并没有阻止 JavaScript 的发展。官方没有模块化标准，那么我们就自己动手创建标准。社区里的前辈们创建并实现了规范，这些规范便是前端模块化发展之路上智慧的结晶。
一. 对模块化进行解释 二. 对打包的理解 三. 关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
文章目录 模块化介绍 准备工作 注意事项 html中基本使用 注意的点 导出方式-〉默认导出 导出一个匿名函数:moduleDefault.mjs 运行该匿名函数 导出一个非匿名函数 运行该模块函数 注意事项 模块处理-〉非默认 基本用法 tools.mjs use.js 避免命名冲突->重命名导入与导出 导出使用别名 导入使用 避免不同文件相同函数名字-> 创建模块对象 使用模块对象化 类的导出 模块化合并操作 tools.js 汇总该导出 使用方式一 ： 正常引入 使用方式二： 合并引入 动态加载模块
在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在<script>标签中即可。随着ajax异步请求的出现，慢慢形成了前后端的分离，客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题。比如全局变量同名问题，看下面的例子：
模块化开发是 JS 项目开发中的必备技能，它如同面向对象、设计模式一样，可以兼顾提升软件项目的可维护性和开发效率。
领取专属 10元无门槛券
手把手带您无忧上云
