【有关npm】 watchify 、browserify

browserify 作用和webpack差不多都是给打包的,webpack上篇文章讲了 然后

require, module.exports 这些都可以给打包成budle.js

--save的意思是把xxxx信息保存到package.json文件中。

还看了 https://www.bbsmax.com/A/q4zVOkA9JK/ 

浏览器本身不支持 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和类分开所以分开是为了开发需求等等...

使用 browserify 编译：

1	$ browserify main.js > bundle.js

main.js 需要的所有其它文件都会被编译进 bundle.js 中，包括很多层 require() 的情况也会一起被递归式的编译过来。

编译好的 js可以直接拿到浏览器使用

参数: 

来自  https://blog.csdn.net/weixin_30628077/article/details/95142018

• –outfile, -o: browserify日志打印到文件
• –require, -r: 绑定模块名或文件，用逗号分隔
• –entry, -e: 应用程序的入口
• –ignore, -i: 省略输出
• –external, -x: 从其他绑定引入文件
• –transform, -t: 对上层文件进行转换
• –command, -c: 对上层文件使用转换命令
• –standalone -s: 生成一个UMB的绑定的接口，提供给其他模块使用。.
• –debug -d: 激活source maps调试文件
• –help, -h: 显示帮助信息
• (PS 在文件里这个加了个参数 引用的名字么?..  browserify -s xxx  src/xxx.js > dist/xxx.js 

例子1 

来自 https://www.jianshu.com/p/73ae3e8374a4 

先创建一个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文件了。

例子2 引用函数

• 修改下我们之前创建的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 ....

================================

下面是npm 几个注意点:

1、package.json后面的  scripts: 后面写的那些，就是命令和命令指代的了。

2、&&是前面的执行好才能执行后面的， &是并行

3、事实上，你可以使用npm run来运行scripts里的任何条目。。。

这个链接不错 https://blog.csdn.net/yy374864125/article/details/40740073  啊 写的太好了 后面都是转载它好了

script

npm 会在项目的 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上的包提供命令行接口，你就可以直接使用它们，方便吧？当然，你总是可以自己写一个简单的小程序。

构建javascript

为了便于组织代码和利用npm上的包，写代码的时候往往使用module.exports和require()。browserify可以将这些一起打包成单一的脚本。使用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

为了能在修改文件之后自动重新生成javascript文件，只需将上面的browserify命令换成watchify并加上一些参数。

"watch-js": "watchify browser/main.js -o static/bundle.js -dv"

这里加了-d和-v两个参数，这样就可以看到详细的调试信息。

构建CSS

用cat就可以搞定：

"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css"

监视CSS

和上面用 watchify 监视 javascript 类似，我们用catw监视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例子

将上面提到的内容组合起来，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