写在前面:

本文主要参考 From Require.js to Webpack - Part 1 (the reasons),原文作者将项目从 require.js 转移到了 webpack 并详细说明了原因以及好处。

  • commonjs (webpack 默认 commonjs,很显然,commonjs 同步书写 js 的方式比 AMD 舒服很多)
  • 客户端单元测试(node 具有丰富的测试框架,webpack 使得客户端测试也可以使用这些框架)
  • 模块复用(node 和客户端的模块复用)
  • NPM(天然支持 NPM,因为 NPM 本身发布的就是 commonjs 模块)
  • 更简单的 ES6 支持以及更多的插件支持(比如 webpack 自带的 uglify 等等)

诚然,作者只是从模块组织方式去对比,并没有牵扯到构建工具这块。而如果说到构建工具,webpack 可能还有更多其他的优势,比如热重载,打包时间大大缩短,css 打包,等等,这些应该和 gulp 等去比较。

尽管 webpack 本身也支持 AMD,但是总觉得 webpack+AMD 有点 Vue/React+JQ 的既视感,而且也不能很好地结合 NPM 使用,所以个人觉得如果要迁移,还是要迁移地彻底一点,毕竟 AMD 的支持只会越来越少。

Webpack has been a huge help to our client-side code base and developer experience in general. It's allowed greater parity and reuse between our client-side and node code, it's made testing our code much easier and it's allowed us to cut way down on the config and extra support code needed to maintain two different module systems in the same code base. The most important thing it has provided though is access to the NPM ecosystem in the browser. Coding will never be the same again :)

CommonJS

Node 用习惯后,我们便会爱上它的 commonjs 的组织方式。使用 webpack 后,我们便可以使用所有的 node 模块,这简直太酷了!很显然,越来越多的模块会支持 commonjs 但是却并没有兼容 AMD。

在这点上 require.js 和 webpack 的区别是(也是 AMD 和 commonjs 的区别):

  1. 前者使用 return,后者使用 module.export
  2. webpack 用 . 代表相对路径, 作用和 path.resolve() 类似
  3. webpack 可以方便搭配 NPM 使用

客户端单元测试

让 mocha 支持 require.js 非常费力,但是如果使用 webpack 就不一样了。只要代码没有基于 DOM,就可以被当作普通的 node 模块一样进行单元测试。

复用和模块化

复用和模块化,AMD 也有啊?有什么不同呢?

  1. node 本身就是 commonjs 方式进行代码组织,这就意味着我们可以把写 node 时的一些最佳实践,设计模式等无缝迁移到客户端代码的书写中。
  2. 我们可以把服务端的一些 commonjs 模块直接用到 客户端,而不是需要改造成 AMD(比如 date/time formatting 以及一些工具模块)

NPM

尽管 commonjs 语法本身比 AMD 优雅,并且还有以上的各种好处,但是迁移到 webpack 最大的好处是对于 NPM 的支持。尽管 require.js 本质上也能够搭配 NPM 使用,但是非常麻烦。

NPM 搭配 require.js:

  1. 需要暴露 node_modules 文件夹路径(commonjs 会自动去寻找 node_modules,但是 AMD 不会)
  2. 需要在配置文件 config.js 中为模块添加 alias(因为 npm install 的模块内部是 commonjs 的组织方式,如果直接 require 并不能找到,需要设置 alias)
  3. 确定你 install 的模块本身没有依赖(因为依赖本身并不会生效)
  4. define('your-module', function(yourModule) { });

而 NPM 搭配 webpack 只需要:

  1. require() the module.

成熟的 ES6 以及插件支持

webpack 对于 ES6 的支持(babel-loader)以及一些内置的插件支持(uglify)比 require.js 强大。

作者在原文举了个简单的例子,他想在 require.js 中使用 ES6 Class,但是需要两步,首先需要 babel 将 ES6 转为 ES5,然后再使用 es6 require.js plugin,但是用 babel-loader 就方便多了。

from Require.js to Webpack(why)的更多相关文章

  1. vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

    1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...

  2. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  3. 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结

    打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...

  4. Vue.js - Day5 - Webpack

    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...

  5. 模块化 require.js 入门教学(前端必看系列)

    在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化 前端模块化 !!! JS 模块化提供给我们三种规范 分别就是 No.1 commonjs  这个其实也就代表了node. ...

  6. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

  7. Day02_Vue.js与Webpack

    Vue.js与Webpack 1 vue.js介绍 1.vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设 ...

  8. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  9. javascript模块化编程(三):require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

随机推荐

  1. 以KeyValue形式构建Lua Table

    Key为字符串 -- 定义一个key,value形式的table local kv = {fruit = "apple", bread = "french", ...

  2. IntelliJ Idea设置护眼浅绿色背景方法

    老版本的设置位置 新版本的设置位置不一样(下图新版本为2017.5.4)的设置位置

  3. CentOS 7 学习(二) 配置Nginx反向代理

    CentOS 7 学习(二) 配置Nginx反向代理 Nginx可以通过php-fpm来运行PHP程序,也可以转向apache,让apache调用php程序来运行. 不过对于Nginx来说,其反向代理 ...

  4. 《如何把事情做到最好》【PDF】下载

    <如何把事情做到最好>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382279 内容简介 <如何把事情做到最好>编辑 ...

  5. 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  6. 3D位置语音,引领吃鸡游戏体验升级

    欢迎大家前往云加社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯游戏云 导语:在刚刚结束的首届腾讯用户开放日上,腾讯音视频实验室带着3D位置音效解决方案,向所有用户亮相,为用户提供360度立体空间的 ...

  7. 查看当前支持的shell,echo -e相关转义符,一个简单shell脚本,dos2unix命令把windows格式转为Linux格式

    /etc/shells [root@localhost ~]# more /etc/shells /bin/sh /bin/bash /sbin/nologin /usr/bin/sh /usr/bi ...

  8. iOS 环信集成项目应用

    环信iOS端3.0版本集成记录--聊天界面篇 环信离线推送证书... 1,环信处在后台的时候,消息的接收与推送 离线发推送 配置属性 EMCallOptions *options = [[EMClie ...

  9. PDO绑定含IN的SQL语句的参数注意事项

    PDOStatement::bindParam(),表示将PDO::prepare()语句中的占位符用参数替换掉.注意,在绑定含有IN的SQL多参数语句时要额外小心,比如$stmt = $db-> ...

  10. C:指针函数一些误区

    当我们学完指针,知道每个数在内存中都占有一定的字节,也就是地址,才有取地址符号&,所以要交换两个数必须把这两个数所对应的内存互换,比如a=2;b=3;要让它们互换且输出,我们用一个函数来试试 ...