commonjs

Mom, I Can't Learn Anymore(《妈妈，我学不动了！》) 是一系列关于计算机领域程序最新时事的文章(偏向于前端领域)，在该系列会从不同的角度讨论领域内的实践和进展。 前言 注意，我期望你带着问题看全文，我们是如何定量分析构建工具？衍生的问题是，学习这类知识的核心是什么？ 周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 building tool 的，也就是我们常说的前端构建工具，当天的主播是 Jake Archibald（chrome team 成员，个人非常喜欢的技术专家）。 其实，刚开始了解到 tooling.report 来自于我非常喜欢的一位开源作者 Evan You（Vuejs 的作者）的推特： 这篇简单的推文引起了我的兴趣，尽管业内存在各种分析前端构建工具的文章，但这些文章往往质量参差不齐，大部分分析不够全面，偏向于定性分析，有些甚至加入了个人的主观臆想。 因此，为什么不对各大主流的构建工具进行定量分析它们呢（利用类似于 benchmark 的测试）？ 这很明显是一个对普通开发者非常有用的需求，但到现在还缺乏相对应权威的东西可能是因为： 前端发展到现在，各大构建工具已经非常的复杂，业界之前有一句笑话，“现在是面向 webpack 配置编程”。同时精通所有的构建工具是需要很大的耐心和技术水平的

转自：https://blog.csdn.net/myKurt/article/details/79914078 nodejs类比Java中：JVM 详述： 就前端来说nodejs具有划时代的意义， 做前端的没用过nodejs都不好意思说自己是前端， 做后端的没听过nodejs， 或者说不出nodejs和java的优缺点，也不是一个合格的后端。 nodejs不是一个js框架，千万不要认为是类似jquery的框架， nodejs是js运行时，运行环境，类比java中jvm， java的开端是什么，无疑是jvm，自从有了jvm，java才能吹牛说自己是“一次编写处处运行”， 不管你是windows还是linux，只要安装了对应版本的jvm都可以运行.class文件。 同样nodejs的作用和jvm的一样一样的，也是js的运行环境，不管是你是什么操作系统， 只要安装对应版本的nodejs，那你就可以用js来开发后台程序。 这具有划时代的意义，意味着一直以来只能在浏览器上玩来玩去的js，可以做后端开发了， 从有了nodejs后就催生出一大批用js做后台开发的前端人员，这部分人员就是偏前端的“全栈程序员”。 记住，nodejs是和jvm同等地位的js运行环境，打开了前端人员走向后端的道路。 【js mvc框架】 相关框架： 框架太多，详见下面两篇文章 私人定制，十款最佳Node.js

深入学习rollup来进行打包 阅读目录 一：什么是Rollup? 二：如何使用Rollup来处理并打包JS文件？ 三：设置Babel来使旧浏览器也支持ES6的代码 四：添加一个debug包来记录日志 五：添加插件来替代环境变量 六：添加 UglifyJS来压缩我们js的代码 七：监听文件变化的插件 --- rollup-watch 八：开启本地服务的插件 --- rollup-plugin-serve 九：实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运行watcher 和 Livereload的工具 十一. rollup+PostCSS打包样式文件并添加 LiveReload 回到顶部 一：什么是Rollup? rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时，它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下 ： 1. 能组合我们的脚本文件。 2. 移除未使用的代码(仅仅使用ES6语法中)。 3. 在浏览器中支持使用 Node modules。 4. 压缩文件代码使文件大小尽可能最小化。 Rollup最主要的优点是 它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率

基本需求 打包react组件，满足支持 typescript、sass、声明文件、map文件、代码压缩 等基本需求。 项目详情见 github： https://github.com/zhl0791/rollup-react-library-template 需要用到的插件 @rollup/plugin-json ：支持 json 文件。 @rollup/plugin-node-resolve ：支持查找外部模块； @rollup/plugin-commonjs ：支持 CommonJS 模块； rollup-plugin-postcss-modules ：支持 css module； rollup-plugin-typescript2 ：支持 typescript； rollup-plugin-dts ：打包声明文件； rollup-plugin-terser ：代码压缩。 ... rollup.config.js 配置文件 import json from '@rollup/plugin-json'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; // import { babel } from '@rollup/plugin

【早读汇】上海@jean-lee《ES6标准入门》笔记 前言 本文系 早读汇第三期活动 来自上海@jean-lee 的读书笔记。 正文从这开始～ Module ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。 ES6 模块的优点： 静态加载 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。 严格模式 严格模式主要有以下限制： 变量必须声明后再使用 函数的参数不能有同名属性，否则报错 不能使用with语句 不能对只读属性赋值，否则报错 不能使用前缀0表示八进制数，否则报错 不能删除不可删除的属性，否则报错 不能删除变量delete prop，会报错，只能删除属性delete global[prop] eval不会在它的外层作用域引入变量 eval和arguments不能被重新赋值 arguments不会自动反映函数参数的变化 不能使用arguments.callee 不能使用arguments

问题： I'm still very confused about CommonJS, AMD and RequireJS. 我对CommonJS，AMD和RequireJS仍然很困惑。 Even after reading a lot. 即使阅读了很多。 I know that CommonJS (formerly ServerJS) is a group for defining some JavaScript specifications (ie modules) when the language is used outside the browser. 我知道CommonJS（以前称为ServerJS）是用于在浏览器之外使用该语言时定义一些JavaScript规范（即模块）的组。 CommonJS modules specification has some implementation like Node.js or RingoJS, right? CommonJS模块规范有一些实现，例如Node.js或RingoJS，对吗？ What's the relation between CommonJS, Asynchronous Module Definition (AMD) and RequireJS? CommonJS，异步模块定义（AMD

CommonJS 规范主要解决服务端中 library 的导入导出问题。 NodeJS（同时也包括 webpack 与 npm）是CommonJS规范的实现 由于 CommonJS 规范引入依赖的方式是同步的，而在浏览器端需要进行异步加载，因此创建了 AMD 规范用于浏览器端管理依赖问题。 require.js 是AMD 规范的一管实现。 UMD 是AMD和CommonJS的糅合。UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。 在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。 来源： oschina 链接： https://my.oschina.net/lemos/blog/4890763

“我们活得好好的，为什么要工程化？” 让我们从原始的前端开始。用记事本新建一个卡哇伊的a.html页面，给它点样式a.css，DUANG加特技a.js。无须编译，本地预览，OK，没问题，上传服务器，等用户访问。哇，前端好好玩，好简单有木有？！然后，我们访问页面，效果还行，再看下网络请求，200！完美！ 等一下，还没完呢？小公司到这儿就OK了，数据上上去，没兼容问题，完美啊！大公司说：注意性能，我要访问量！不好玩了吧！看看a.css的请求，如果每次用户访问都要加载，是不是很影响性能，浪费宽带啊！如果网络请求状态是304就好了！304，本地缓存！ 这回成了吗？不行，304是协商缓存，还是要和服务器通信一次。于是必须彻底灭掉这个请求，那么强制使用本地缓存，不要和服务器通信。那么问题来了：都不让浏览器发资源请求了，这缓存还咋更新呢？对，更新页面中引用的资源路径，让浏览器放弃缓存，加载新资源。问题解决，完美！ 大兄弟，别慌呀！现在a.html上面只有一个a.css，带上版本参数来改变资源路径，OK。假如还有b.css、c.css，某次上线只改了a.css的版本，通用的路径生成器上将全部版本都改了，那岂不是又有浪费了。这样一来，要解决这种问题就必须让版本修改和文件内容关联，才能准确地对应资源版本。什么东西与文件内容相关呢？大佬们想到利用数据摘要算法对文件求摘要信息

CommonJS 模块 module.exports 初始值为一个空对象 {} exports 是 module.exports 的引用，不能直接改变引用, 比如 exports = funA require() 返回的是 module.exports 而不是 exports。故两者选其一时，使用 module.exports 当 module.exports 指定新值时，不再使用先前的别名 exports 这里理解指针（exports的指针没有改变时，操作的是内存块。 //utils.js let a = 100; console.log(module.exports); //能打印出结果为：{} console.log(exports); //能打印出结果为：{} exports.a = 200; //这里辛苦劳作帮 module.exports 的内容给改成 {a : 200} exports = '指向其他内存区'; //这里把exports的指向指走 //test.js var a = require('/utils'); console.log(a) // 打印为 {a : 200} 用法 1 exports = module.exports = somethings 上面的代码等价于 module.exports = somethings exports =