browserify cli 使用说明

本文仅仅是方便自己记忆来写的简单的说明，并不包括教程类的讲解。官网

browserify [entry files] {OPTIONS}

1. 标准配置 standard options

   • –outfile | -o：指定browserify输出的文件路径

   • –require | -r：生成的bundle.js可以指定导出的模块，可以在另一个script中通过require()引用。详细说明见官网external requires

   • –entry | -e：应用程序的入口

   • –ignore | -i：将指定的模块替换成空对象

   • –exclude | -u：将指定模块从文件依赖关系中移除。如果编译的文件使用过了指定的模块，则会报错

   • –external | -x：从另一个束bundle中引用文件

   • –transform | -t：指定翻译包

   • –command | -c：指定翻译命令

   • –standalone | -s：browserify [entry file] –standalone [modulename] > [outfile]
     将entry file编译成UMD 术，同时支持node, amd ,window.modulename环境的形式
     Note however that standalone only works with a single entry or directly-required file.

   • –debug | -d：启用调试模式，将给出文件映射source map

   • –help | -h：显示帮助信息。比如显示高级配置说明，browserify –help advanced

2. 高级配置 advanced options

   • –insert-globals | –ig | –fast：默认false。跳过检测，并始终插入process, global, __filename, __dirname
     好处：快速构建
     坏处：额外的字节

   • –insert-global-vars | –igv：检测和定义全局变量的逗号分割表。默认: __filename, __dirname, process, Buffer, global

   • –detect-globals | –dg：默认true。检测global, __filename, __dirname，当它们存在时并声明定义它们。
     好处：npm模块更容易工作
     坏处：构建慢

   • –ignore-missing | –im：默认false。忽略不能后解决任何问题的require()

   • –noparse=FILE：不解析任何文件。对于庞大的文件，例如jquery或者第三方将捆绑更多，更快

   • –no-builtins：关闭内置。这是方便的时候，当你想运行一个在node中提供核心内置的束bundle。

   • –no-commondir：关闭设置commondir。这是有用的，如果你想bundle生成时保存原始的路径。（感觉就是多了一些注释，不知道有啥用）

   • –no-bundle-external：关闭所有外部模块external modules的捆绑。这是有用的，如果你只想要捆绑你的本地文件。

   • –bare： –no-builtins, –no-commondir，–insert-global-vars的别名。这是方便，如果你想在node里运行bundle。

   • –no-browser-field | –no-bf：关闭package.json里面的browser的设置。这是有用的如果你想在node里面运行bundle

   • –node：–bare和–no-browser-field的别名

   • –deps：打印输出模块依赖数组，而不是标准bundle输出。

   • –no-dedupe：关闭重复数据删除功能

   • –list：在依赖图中打印每一个文件

   • –extension=EXTENSION：识别指定后缀的文件。这个选项可以使用多次

   • –global-transform=MODULE | -g MODULE：在transforms运行后，使用当前设置的transform module

   • –ignore-transform=MODULE | -it MODULE：不要运行指定的transform module

   • –plugin=MODULE | -p MODULE：注册一个module为plugin

说说那些坑

1. 不打包jquery

我们在browser.js里

const $ = require('jquery');

但是打包browser.js的时候，不想把jquery打包进去，避免文件太大。之前按照官方的一个做法：

browserify -r jquery --standalone jquery > jquery-bundle.js
browserify main.js --exclude jquery > bundle.js

此方法有毒，弄出来的不能用。编译出来的jquery文件头部是这样：

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}

好了，不管了，说下正确做法。官方另外一个：

$ 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

同理：

第一步：

browserify -r jquery > bundle/jquery.js

第二步：

browserify -x jquery develop/page/browser.js > bundle/browser.js

第三步：

<script src="./bundle/jquery.js"></script>
<script src="./bundle/browser.js"></script>

OK ,可以了。生成的jquery.js头部代码是：

require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code

那么–standalone难道就不能用了吗？我发现了另外一种方法

第一步：

browserify -r jquery --standalone $ > jquery-umd.js

第二步：

browserify develop/page/umdtest.js > bundle/umdtest.js

其中，umdtest.js不引用require(‘jquery’)，直接$()访问

第三步：

<script src="./jquery-umd.js"></script>
<script src="./bundle/umdtest.js"></script>

终于可以用了。

暂时还没有搞清楚原因，先这样子可以用了