本文共 4105 字,大约阅读时间需要 13 分钟。
browserify 作用和webpack差不多都是给打包的,webpack上篇文章讲了 然后
require, module.exports 这些都可以给打包成budle.js
--save的意思是把xxxx信息保存到package.json文件中。
还看了
浏览器本身不支持 require 和 define 的模块化开发,但是 nodejs 支持。使用 broswerify,就可以让浏览器支持和 nodejs 一样的开发方式。
watchify是,和 broswerify 组队的自动对文件修改做出响应的工具
注意,看链接里的,好像需要安装?分别安装,然后呢还有个插件。。
// 监听当前目录文件状态,代替执行了 broswerify main.js > bundle.js$watchify main.js > bundle.js // -d debug 模式,会生成 sourceMap// =v 输出日志$watchify main.js > bundle.js -d -v // -o --outfile$ watchify browser.js -d -o static/bundle.js -v // -o 也可以执行语句
嗯,如果有》 箭头的话,就是对这个过程进行监听
上面例子的第三个,这个应该是 分开监听吧,反正d v debug 输出 便于调试
bundle.js 是run的时候自己把all 所有 的东西去打包的
build是为了开发时候的方便吧.. dist下面全总览的~ 那么多行没有逻辑没有分析demo和类分开所以分开是为了开发需求等等...
1 |
|
main.js 需要的所有其它文件都会被编译进 bundle.js 中,包括很多层 require() 的情况也会一起被式的编译过来。
编译好的 js可以直接拿到浏览器使用
来自
来自
先创建一个hello.js文件,内容如下 对外表现,module.exports
module.exports = 'Hello world';
然后在创建一个entry.js文件,内容 引用的需要,require
var msg = require('./hello.js')console.log("MSG:", msg);
最后使用browserify进行进行打包 出口,打包
browserify entry.js -o bundle.js
然后entry.js和hello.js就被打包成一个bundle.js文件了。
修改下我们之前创建的hello.js文件成
module.exports = function(){ var $ = require('jquery') $(function(){ $("body").html("Hello world, jquery version: " + $.fn.jquery); }) };
entry.js文件也要稍微修改下
var hello = require('./hello.js') hello()
<script src="bundle.js"></script>
这时打开index.html,你会看到页面上有字了,出现了Hello world, jquery version ....
================================
1、package.json后面的 scripts: 后面写的那些,就是命令和命令指代的了。
2、&&是前面的执行好才能执行后面的, &是并行
3、事实上,你可以使用npm run来运行scripts里的任何条目。。。
这个链接不错 啊 写的太好了 后面都是转载它好了
会在项目的 package.json
文件中寻找 scripts
区域,其中包括npm test
和npm start
等命令。
其实npm test
和npm start
是npm run test
和npm run start
的简写。事实上,你可以使用npm run
来运行scripts
里的任何条目。
使用npm run
的方便之处在于,npm会自动把node_modules/.bin
加入$PATH
,这样你可以直接运行依赖程序和开发依赖程序,不用全局安装了。只要npm上的包提供命令行接口,你就可以直接使用它们,方便吧?当然,你总是可以自己写一个简单的小程序。
为了便于组织代码和利用npm上的包,写代码的时候往往使用module.exports
和require()
。可以将这些一起打包成单一的脚本。使用browserify很简单,只需在package.json
中加入一个['build-js']
条目,类似这样:
"build-js": "browserify browser/main.js > static/bundle.js"
如果是用于生产环境,还需要压缩一下。我们只需要将uglify-js
加入devDependency,然后直接通过管道传递一下即可:
"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js"
为了能在修改文件之后自动重新生成javascript文件,只需将上面的browserify命令换成并加上一些参数。
"watch-js": "watchify browser/main.js -o static/bundle.js -dv"
这里加了-d
和-v
两个参数,这样就可以看到详细的调试信息。
用cat
就可以搞定:
"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css"
和上面用 watchify 监视 javascript 类似,我们用监视CSS文件的改动:
"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v"
很简单,npm run
每个子任务,然后用&&
连接起来就成。
"build": "npm run build-js && npm run build-css"
类似地,我们用&
并行子任务:
"watch": "npm run watch-js & npm run watch-css"
将上面提到的内容组合起来,package.json
大致就是这个样子:
{ "name": "my-silly-app", "version": "1.2.3", "private": true, "dependencies": { "browserify": "~2.35.2", "uglifyjs": "~2.3.6" }, "devDependencies": { "watchify": "~0.1.0", "catw": "~0.0.1", "tap": "~0.4.4" }, "scripts": { "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js", "build-css": "cat static/pages/*.css tabs/*/*.css", "build": "npm run build-js && npm run build-css", "watch-js": "watchify browser/main.js -o static/bundle.js -dv", "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v", "watch": "npm run watch-js & npm run watch-css", "start": "node server.js", "test": "tap test/*.js" }}
生产环境下,只需运行npm run build
。如果是本地开发,就用npm run watch
。
你也可以坐下扩展。比方说,如果你希望在运行start
前先运行build
,那么你只需写上这么一行:
"start": "npm run build && node server.js"
也许你想同时启动watcher?
"start-dev": "npm run watch & npm start"
大部分除了口水话之外是转载~ 踩在巨人的肩膀上hhhh