browserify 开始

browserify

在浏览器中 require('modules')

使用node-风格的require()来组织您的浏览器代码,并加载由npm安装的模块。

browserify将递归分析应用程序中的所有require()调用,以便构建一个可以在单个<script>标签中提供给浏览器的软件包。

快速开始

如果您刚刚使用browserify,请浏览browserify手册browserify.org 上的资源。

查看 browserify搜索 以便于在npm找到browserify兼容包。

示例

新建一个mian.js文件,其中包含一些require()在其中,当然你可以使用相对路径例如,'./foo.js''../lib/bar.js',

或者可以是module路径,例如会在node_modules/目录下使用 node's module lookup algorithm 搜索的'gamma'

var foo = require('./foo.js');
var bar = require('../lib/bar.js');
var gamma = require('gamma');

var elem = document.getElementById('result');
var x = foo(100) + bar('baz');
elem.textContent = gamma(x);

通过分配到module.exportsexport来导出功能:

module.exports = function (n) { return n * 111 }

现在只需使用browserify命令来构建一个入口文件为main.jsbundle

$ browserify main.js > bundle.js

main.js需要的所有模块都包含在require()图的递归步行的bundle.js中。

要使用bundle,只需将<script src="bundle.js"></script>添加到您的html中!

安装

使用npm:

npm install -g browserify

用法:

用法:browserify [入口文件] {选项}

标准选项:

    --outfile,-o 将 browserify bundle写入此文件。
                   如果未指定,则将printd打印到标准输出。

    --require,-r 要添加到bundle.require()的模块名称或文件
                   可以使用冒号分隔符来设置目标。

      --entry,-e 应用程序的入口

     --ignore,-i 用空的stub替换文件。文件可以是全局。

    --exclude,-u 从输出包中省略一个文件。文件可以是全局。

   --external,-x 从另一个bundle引用一个文件。文件可以是全局。

  --transform,-t 在顶级文件上使用变换模块。

    --command,-c 在顶级文件上使用transform命令。

  --standalone -s 为所提供的导出名称生成UMD包。
                   该软件包与其他模块系统配合使用,并设置名称
                   如果没有找到模块系统,则将其作为窗口全局给出。

       --debug -d 启用允许您分别调试文件的源映射。

       --help,-h 显示帮助消息

对于高级选项,键入`browserify --help advanced`。

指定一个参数。
高级选项:

--insert-globals, --ig, --fast    [default: false]


    跳过检测并始终插入进程,全局,__filename和__dirname。

    好处:加快构建
    代价:额外的字节

  --insert-global-vars,--igv

    用于检测和定义的全局变量的逗号分隔列表。
    默认值:__filename,__ dirname,进程,缓冲区,全局

  --detect-globals,--dg [default:true]

    检测进程,全局,__filename和__dirname的存在并定义
    这些值存在时。

    好处:npm模块更有可能工作
    代价:构建速度慢

  --ignore-missing,--im [default:false]

    忽略不需要解决的`require()`语句。

  --noparse = FILE

    不要解析文件。这将使巨大的库更快地构建,例如jquery或threejs。

  --no-builtins


    关闭builtins,当你想在node中运行一个bundle时,这很方便
    提供核心builtins。

   -no-commondir

    关闭设置commondir。这很有用,如果你要保留生成捆绑包的原始路径。

    --no-bundle-external

    关闭所有外部模块的捆绑bundling。这很有用,如果你只想要
    bundle您的本地文件。

    -bare

    这是--no-builtins,--no-commondir的别名,并设置--insert-global-vars
    到“__filename,__ dirname”。这会很方便,如果要在node中运行bundles

   --no-browser-field,--no-bf

    关闭package.json浏览器字段分辨率。如果你也很方便
    如果需要在node中运行一个bundle。

    --node


    是--bare和--no-browser-field的别名。

   --full-paths

    将转换模块ids转换成数字索引。对于保留生成包的原始路径,这是有用的。

    --deps

    代替标准的bundle输出,打印 由module-deps生成的数组依赖

   --no-dedupe

    关闭重复数据删除。

    --list


    在依赖图中打印每个文件。对于makefile有用

  --extension = EXTENSION

    将具有指定EXTENSION的文件视为模块,可以使用此选项
    多次。

  --global-transform = MODULE,-g MODULE

    在任何普通变换运行后,对所有文件使用变换模块。

  --ignore-transform = MODULE,-it MODULE

    不运行某些转换,即使在其他地方指定。

  --plugin = MODULE,-p MODULE

    注册MODULE作为插件。

    给转换和插件传递参数:

  对于-t,-g和-p,您可以使用subarg语法将选项传递给
  转换或插件功能作为第二个参数。例如:

    -t [foo -x 3 - beep]

  将通过调用以下方法为每个适用的文件调用`foo`变换:

    foo(file,{x:3,beep:true})

兼容性

许多不做IO的npm模块将在browserified之后工作。 其他的模块可能要做更多工作。

许多节点内置模块已被包装在浏览器中,但只有当您显式require()或使用其功能时。

当您require()任何这些模块时,您将获得一个浏览器特定的shim

此外,如果您使用任何这些变量,它们将以浏览器适当的方式在捆绑的输出中定义:

  • process
  • Buffer
  • global - top-level scope object (window)
  • __filename - file path of the currently executing file
  • __dirname - directory path of the currently executing file

更多实例

external requires 额外要求

您可以轻松地创建一个将导出require()函数的bundle,以便可以从另一个脚本标签require()模块。这里我们将使用 throughduplexer创建一个bundle.js。

$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

然后在你的页面你可以这样:

<script src="bundle.js"></script>
<script>
  var through = require('through');
  var duplexer = require('duplexer');
  var myModule = require('my-module');
  /* ... */
</script>

外部源的映射

如果您喜欢将源映射保存到单独的.js.map源映射文件中,则可以用exorcist来实现。简单示例如下:

$ browserify main.js --debug | exorcist bundle.js.map > bundle.js

了解其他选项

多个bundle

如果browserify找到已经在页面范围内定义的required 功能,如果在其自己的bundled模块集中没有找到任何匹配项,它将返回该功能。

通过这种方式,您可以使用browserify在多个页面之间分割bundles,以便共享,对不频繁更改的模块提供缓存的优势,同时仍然可以使用require()。 只需使用--external--require的组合来排除常见的依赖关系。

例如,如果一个网页有2个界面,beep.js

var robot = require('./robot.js');
console.log(robot('beep'));

boop.js:

var robot = require('./robot.js');
console.log(robot('boop'));

两者都依赖于robot.js

module.exports = function (s) { return s.toUpperCase() + '!' };
$ browserify -r ./robot.js > static/common.js
$ browserify -x ./robot.js beep.js > static/beep.js
$ browserify -x ./robot.js boop.js > static/boop.js

然后在beep的页面上,您可以:

<script src="common.js"></script>
<script src="beep.js"></script>

而boop页面可以有:

<script src="common.js"></script>
<script src="boop.js"></script>

使用-r-x的方法适用于少量拆分assets,但是有一些插件用于自动分解在browserify手册的分区部分中描述的组件。

api example

您也可以直接使用API​​:

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle().pipe(process.stdout);

methods

var browserify = require('browserify')

browserify([files] [, opts])

有疑问、勘误、请您在下方留言,感谢您的支持 ღ( ´・ᴗ・` )!

感谢您阅读,这篇文章归 极客点子版权所有.
如果转载,请注明出处: 极客点子版权所有(/page/603.html) 知识共享许可协议
本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.

关于作者:

    简介:

    系统架构师 、作家、
    研究方向:数据分析、 深度学习、 服务器架构、 系统原理