浅谈JavaScript模块:Bundling
来源:互联网 发布:篮球身体素质知乎 编辑:程序博客网 时间:2024/04/29 17:53
模块,依赖管理和动态加载应该是大家对任何现代编程语言一个基本要求。在2015年,这些都是一些新特性被添加到了JavaScript中。
在NodeJS中,模块化被广泛使用,但在这里我们的重点将是我们如何在浏览器端模块化编程。我们将探讨一些历史,对现状的分析以及和对当前各种解决方案的比较:Browserify,WebPACK中和JSPM。
模块的历史
自1995年JavaScript诞生至现在,浏览器原生并不支持模块。Node和CommonJS诞生自2009年,并在NPM使用绝大多数的package使用CommonJS的模块。
Browserify发布于2011年,为浏览器带来了CommonJS的模块化用法,允许客户端JavaScript require
NPM package。该工具bundle(捆绑)了所有所需的依赖到一个单一的JavaScript文件。
过去
像jQuery这类库,会暴露一个全局对象给 window
window.$ = function() { ... };
通过script标签引入脚本,使用它暴露的对象
<script src="jquery.js"></script><script>$(function() { ... });</script>
自己的代码通常顶一个全局命名空间,像App
一样,以防止污染全局z作用域。如果没有这个,很容易造成命名冲突。
var App = {};App.Models = {};App.Models.Note = function() {};
将来
使用ES6 module 导出对象
export default function $() { ... }
引入模块到本地作用域并且使用它
import $ from 'jquery';$(function() { ... });
- 没有全局要求
- 来源顺序无关
- 可以访问NPM
- 无需自己定义命名空间
- 在任何时候根据需要动态地加载模块
目前
目前的状况真的很复杂。首先,有多种模块化的方案可以使用:
CommonJS
AMD
UMD
ES6 Modules
bundle文件的工具
Browserify
jspm
Webpack
Gulp
transpiler工具
Babel结合ES6
CoffeeScript
TypeScript
另外,还有一些可以允许动态加载的工具
requirejs
systemjs
共识
有几件事情,我们可以同意:
- ES2015 module是JavaScript未来统一的模块化方式。
- Babel是目前的ES2015编译器。
- 如果你现在就想使用模块,这将很可能多多少少涉及在一些CommonJS。
让我们来通过简单配置使用Browserify,WebPACK中和JSPM,这些是最重要的JavaScript bundler。
新建一个工程
mkdir modules-appcd modules-appnpm init -ynpm install --save-dev browserify webpack jspmmkdir srctouch src/{entry,lib}.js index.html
更新一下index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Modules!</title></head><body> <script src="bundle.js"></script></body></html>
至此,启动一个本地服务器。
Browserify
Browserify可以允许在浏览器端使用require("modules")
语法,最终bundle所有依赖。
打开src/lib.js
添加第一个模块
var double = function(number) { return number * 2;}module.exports = { double: double}
打开src/entry.js
我们将require
第一个模块,调用该模块.
var lib = require('./lib.js');console.log(lib.double(2));
在package.json
文件中更新script
"scripts": { "browserify": "browserify ./src/entry.js -o ./bundle.js"}
在项目的根目录下运行npm run browserify
browserify会在根目录下创建一个bundle.js文件,打开index.html,控制台会出现4。
Browserify 不仅仅可以bundle自己写的js文件,它还可以结合npm module一起使用,下面使用lodash看看。
执行npm install lodash
编辑src/lib.js
var sum = require('lodash/sum');var double = function(number) { return number * 2;}var addFive = function(number) { return sum([number, 5]);}module.exports = { double: double, addFive: addFive}
编辑src/entry.js
调用 addFive
函数
var lib = require('./lib.js');console.log(lib.double(2));console.log(lib.addFive(2));
使用npm run browserify
创建bundle.js,打开index.html, 可以看到在控制台输出4和7,说明lodash引入成功了。
如果你已经跟着动手执行到了这一步了,你就应该发现了在文章开头,模块化的各种好处了。
- 没有全局要求
- 来源顺序无关
- 可以访问NPM
- 无需自己定义命名空间
稍后我们将看看如何在运行时动态加载module
Webpack
Webpack中是一个module bundler。 Webpack持有依赖性的模块,并生成表示这些模块的静态资源。
在package.json中添加一个新的script
"webpack": "webpack ./src/entry.js bundle.js"
运行npm run webpack
webpack将重写bundle.js文件,输出的结果与之前是一样的。
尝试运行npm run browserify
和npm run webpack
,对比看看编译之后的bundle.js文件的差异。了解这些工具的内部是如何工作的并不是首要解决的任务,重要的是,虽然的实现不同,它们基本上是将CommonJS模块编译集成供标准的浏览器使用。每个模块被置于bundle.js内的函数内,并分配一个ID,以便它可以根据需要时加载。
webpack的功能远远不止这些。它就像一把module bundler中的瑞士军刀。webpack中还附带了额外的开发工具,像 hot module replacement,类似于LiveReload,当模块发生改变时,它会自动重新加载在浏览器中各个模, 但没有刷新页面。
get started webpack
参考文章:http://www.sitepoint.com/javascript-modules-bundling-transpiling/?utm_source=javascriptweekly&utm_medium=email
- 浅谈JavaScript模块:Bundling
- JavaScript 浅谈
- 浅谈JavaScript
- 浅谈Javascript
- UVA 598 - Bundling Newspapers
- javascript模块
- JavaScript模块
- JavaScript 模块
- JavaScript模块
- 浅谈ES6模块基础知识
- asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )
- 浅谈linux中的模块加载
- 浅谈PHP的Socket模块
- Python之struct模块浅谈
- 注册登录模块设计浅谈
- 浅谈linux中的模块加载
- 浅谈nodejs中的Crypto模块
- 浅谈nodejs中的Crypto模块
- Android学习笔记(图片加载)
- 网络编程基本概念
- 20140417 css画图形
- 广度优先搜索
- leetcode118题 题解 翻译 C语言版 Python版
- 浅谈JavaScript模块:Bundling
- WebService学习总结(2)——WebService是什么?
- Java千百问_05面向对象(005)_接口和抽象类有什么区别
- 毕设笔记--SSH 之Struts管理
- Java基础--并发实用工具(3)
- 液晶拼接控制器
- HDU 2112.HDU Today【最短路径(Dijsktra算法+字符串)】【4月17】
- vs2008调试遇到的问题
- Could not load the Tomcat server configuration at /Servers/Tomcat v7.0 Server at