共计 7390 个字符,预计需要花费 19 分钟才能阅读完成。
【导语】:Browserify 是一个开源的 JS 编译工具,能够让你应用相似于 node 的 require() 的形式来组织浏览器端的 JS 代码,通过预编译让前端 JS 能够间接应用 Node NPM 装置的一些库。
简介
Browserify 是一个开源的 JavaScript 工具,它能够让你像在 node 中那样,在浏览器中也能够应用 require('module')
来加载模块。换句话说,它能够让服务端的 CommonJs 的模块运行在浏览器端。
开源地址
Browserify 在 GitHub 上已有 13.5k Star。https://github.com/browserify…
装置
如果你想在命令行中应用,能够间接全局装置:
npm install -g browserify
根底应用
简略上手
咱们先来看一个简略的例子。假如咱们有一个文件 index.js,引入了一个内部模块 uniq
。首先咱们装置这个模块
npm install uniq
接着在 index.js 应用这个模块
const uniq = require("uniq");
console.info(uniq([1,2,3,1,2,3]))
咱们晓得,这个 index.js 文件是能够间接在 node 环境下运行的,然而在浏览器上运行会有什么成果呢?咱们来试一下成果,在 index.html 中手动引入这个文件:
<script src="./index.js"></script>
关上网页,咱们能够看到控制台报错了:
其实很容易了解,咱们基本没有定义这个 require
,浏览器当然也不会意识它了。这时候咱们的配角 Browserify 就派上用场了,咱们在以后门路下执行如下命令:
browserify index.js > app.js
而后批改咱们 index.html 引入的脚本为 app.js:
`<script src=”./app.js”></script>
`
接着,咱们刷新一下页面,能够看到失常显示了去重后的数组:
内部依赖
如果你想在 script 标签中间接应用第三方模块,或者咱们本人定义的模块,你能够应用 --require
选项参数,它的简写为 -r
。承接上例,假如咱们的 index.js 导出了一个对象:
module.exports = {
name: "Jerry",
techs: ["Vue", "React", "Webpack", "Vue"]
}
并且咱们想在 index.html 中间接应用 uniq 模块和 index.js 导出的对象。此时咱们须要批改咱们的命令:
browserify -r uniq -r index.js:myModule > app.js
上述命令的意思是,将 uniq 打包成一个可 require 的模块,将 index.js 也打包成一个可 require 的模块,并且这个模块的名字叫 myModule。接着在 index.html 中批改 script 标签:
<script src="./app.js"></script>
<script>
const uniq = require("uniq");
const myModule = require("myModule");
console.info(`Got unique techs [${uniq(myModule.techs)}] from ${myModule.name}`)
</script>
能够看到,输入内容跟咱们预期的统一。
生成 sourcemap
Browserify 也能够生成 sourcemap 不便咱们开发中定位问题,它的应用很简略,只须要加上 --debug
选项即可(简写为 -d
)。咱们批改之前的命令:
browserify -d -r uniq -r index.js:myModule > app.js
而后看一下生成的 app.js 文件:
能够看到在最初生成了 sourcemap 内容,在开发中能够不便的借助于它来进行调试了。当然,如果你想将生成的 sourcemap 与咱们的 js 文件分来到,能够借助于 exorcist
来实现(exorcist 原意为“驱魔人”,这里指代的是,将文件中的 sourcemap 局部的内容“驱逐”到另一个独自文件中去,更多用法请参考:exorcist):批改咱们的命令为:
browserify -d -r uniq -r index.js:myModule | npx exorcist ./app.js.map > ./app.js
执行后你就会发现,你的 app.js 和 它对应的 sourcemap 文件曾经拆散了:
多文件打包
当多个页面同时用到某一个雷同的文件时,咱们心愿独自抽离出这个文件,再联合缓存机制,能够实现高效的加载。在 browserify 中咱们能够通过 --external
(简写 -x)和 --require
(简写 -r)来实现。比方咱们此时有如下文件:utils.js(专用的工具库):
function add(a, b) {return a + b;}
function minus(a, b) {return a - b;}
function upper(str) {return String(str).toLocaleUpperCase()}
module.exports = {
add,
minus,
upper
}
sum.js:
const {add} = require("./utils")
console.info(add(1,2))
upper.js:
const {upper} = require("./utils")
console.info(upper("hello"))
咱们想将 utils.js 独自打包成一个文件,而后 sum.js 和 upper.js 的打包文件中不必蕴含这个 utils.js 的代码,而且间接 require 引入,咱们须要如下三个命令:
// 独自打包 utils.js 文件为 common.js 文件
browserify -r utils.js -o ./lib/common.js
// 打包 sum.js,并且指定其应用的 utils.js 为内部模块(即不须要将这个 utils.js 打包进来)browserify -x utils.js sum.js -o ./lib/sum.js
// 打包 upper.js,并且指定其应用的 utils.js 为内部模块(即不须要将这个 utils.js 打包进来)browserify -x utils.js upper.js -o ./lib/upper.js
顺次执行后会在当目录下生成 lib 文件夹,外面有三个打包后的文件:lib/common.js:
require=(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module'"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({"/src/03-multiple/utils.js":[function(require,module,exports){function add(a, b) {return a + b;}
function minus(a, b) {return a - b;}
function upper(str) {return String(str).toLocaleUpperCase()}
module.exports = {
add,
minus,
upper
}
},{}]},{},[]);
lib/sum.js
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module'"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){const { add} = require("./utils")
console.info(add(1,2))
},{"./utils":"/src/03-multiple/utils.js"}]},{},[1]);
lib/upper.js
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module'"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){const { upper} = require("./utils")
console.info(upper("hello"))
},{"./utils":"/src/03-multiple/utils.js"}]},{},[1]);
能够看到,common.js 中蕴含着私有的办法,sum.js 和 upper.js 中只蕴含着本人的业务逻辑,而内部模块的应用是通过 require 来引入的。咱们来验证一下是否能够运行:
新建一个 sum.html 文件,引入:
<script src="./lib/common.js"></script>
<script src="./lib/sum.js"></script>
运行后果如下图,能够看到正确的输入了后果。
封装 npm scripts
在开发过程中,咱们通常会将一些罕用的构建命令封装成 npm 脚本去执行,这样能够减小咱们输错脚本内容的几率,咱们在 package.json 文件中减少 scripts
{
"scripts": {"build": "browserify index.js > app.js"}
}
接着咱们执行 npm run build
就能够实现同样的工作了,这也是最佳实际的一种。
进阶用法
应用 ES Module
如果你应用的是 import 或者 export 这样的 ES6 的模块化语言来引入其余模块的话,browserify 也提供了插件反对这样的语法。咱们须要装置如下依赖:
npm install --save-dev @babel/core @babel/preset-env babelify
而后增加 babel.config.json 配置文件来配置 babel:
{"presets": ["@babel/preset-env"]
}
假如此时咱们的 index.js 文件如下:
import uniq from "uniq";
console.info(uniq([1,2,3,1,2,3]))
那么要像让 browserify 正确的打包,须要如下命令:
browserify index.js > app.es.js -t babelify
代码压缩
假如咱们的 index.js 中呈现了没有应用的变量或者办法,这些代码永远不会被执行,那么打包进最终的生成文件无疑是一种节约。browserify 也提供了这样的插件来优化咱们的生成代码,比方:删除未应用的变量,删除有效的代码,压缩代码等。
咱们须要装置这个插件
npm install --save-dev tinyify
假如咱们的 index.js 是这样的:
const name = 'Hello';
const version = 1.1;
function add(a, b) {return a + b;}
function upper(str) {return str.toUpperCase()
}
console.info(add(name, version))
首先咱们看一下不应用插件的打包输入:
browserify index.js > app.big.js
生成的 app.big.js 文件内容:
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module'"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
const name = 'Hello';
const version = 1.1;
function add(a, b) {return a + b;}
function upper(str) {return str.toUpperCase()
}
console.info(add(name, version))
},{}]},{},[1]);
咱们能够看到,index.js 中的代码原样的被包裹在匿名函数中。并且咱们的源代码中没有应用其余模块,然而打包后的文件还是模块引入之类的代码打包进来了。咱们应用 tinyify 插件再看看:
browserify index.js > app.big.js -p tinyfiy
生成的 app.small.js 文件内容如下:
console.info("Hello1.1");
对,你没有看错,就是这么一行代码!简略粗犷!其实读者回过头来看一下 index.js 的代码,无非也就是这么一行输入代码而已。所以,借助于 tinyify 插件,咱们能够无效的缩小打包文件的体积,晋升程序加载速度与运行效率。
监听文件批改
在开发过程中,咱们不心愿每次批改文件都要去手动的执行构建脚本,所以须要这样一个工具来监听文件的批改,一有变动立刻执行构建逻辑。咱们能够应用 watchify 来实现这样的成果。首先装置这个模块:
npm install watchify
接着只有运行如下的命令即可:
watchify index.js -o app.js
当咱们的 index.js 文件批改时,app.js 就会被从新生成,刷新浏览器后就能够看到最新的后果了。
咱们能够将上述三个脚本封装成 npm scripts 来应用:
{
"scripts": {
"dev": "watchify index.js -o app.js",
"build": "browserify index.js -o app.js -p tinyify",
"build:es": "browserify index.js > app.es.js -t babelify -p tinify",
}
}
好了,对于 browserify 的应用就介绍到这里,如果想理解更多,能够去翻阅它的官网把握更多用法。
开源前哨
日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库,包含:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。