【有關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