Browserify入门
2016-09-07 15:10
162 查看
1.Browserify是什么?
“Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.” - Browserify.org
出自官网的一句话。用通俗的话讲就是:browserify 是一个浏览器端代码模块化工具,可以处理模块之间的依赖关系,让服务器端的 CommonJS 格式的模块可以运行在浏览器端。
2.我们用Browserify来做什么
Browserify的原理:处理代码依赖,将模块打包到一起,实现压缩合并代码。 Browserify 可以让你使用类似于 node 的
require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node
NPM 安装的一些库。
3.安装
4.示例
main.js 的内容,像普通的 nodejs 程序那样使用 require() 加载库和文件。
导出的方法:
使用 browserify 编译:
现在 main.js 需要的所有其它文件都会被编译进 bundle.js 中,包括很多层 require() 的情况也会一起被递归式的编译过来。编译好的 js 可以直接拿到浏览器使用
“Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.” - Browserify.org
出自官网的一句话。用通俗的话讲就是:browserify 是一个浏览器端代码模块化工具,可以处理模块之间的依赖关系,让服务器端的 CommonJS 格式的模块可以运行在浏览器端。
2.我们用Browserify来做什么
Browserify的原理:处理代码依赖,将模块打包到一起,实现压缩合并代码。 Browserify 可以让你使用类似于 node 的
require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node
NPM 安装的一些库。
3.安装
npm install -g browserify
4.示例
main.js 的内容,像普通的 nodejs 程序那样使用 require() 加载库和文件。
var foo = require('./foo.js'); var bar = require('../lib/bar.js'); var cal = function() { return foo(100) + bar('baz'); }
导出的方法:
module.exports = cal;
使用 browserify 编译:
browserify main.js > bundle.js
现在 main.js 需要的所有其它文件都会被编译进 bundle.js 中,包括很多层 require() 的情况也会一起被递归式的编译过来。编译好的 js 可以直接拿到浏览器使用
<script src="bundle.js"></script>
相关文章推荐
- 使用Browserify配合jQuery进行编程的超级指南
- 一步步教你学会browserify
- ES6 编译 ES5 环境搭建
- browserify-transform的写法
- browserify总结
- gulp项目构建小结
- gulp+bower体系如何使用browserify调用npm模块
- 浅谈JavaScript模块:Bundling
- 使用 ES6 进行开发
- ReactJS+es6+gulp+browserify开发环境搭建
- Typescript学习之基于gulp+browserify+browser-sync等搭建自动化开发环境
- 前端内容的自动化构建——gulp学习笔记
- browserify出现ParseError: Unexpected character '�'
- gulp的安装和使用
- Gulp/seajs /require/browserify / webpack 简单区分
- browserify打包后的运行规则策略
- 使用Browserify来实现CommonJS的浏览器加载方法
- 一个后端er想进前端娱乐圈
- vue学习
- mysql组合索引与字段顺序