前端模块化的简单综述（二）

6.0，npm

6.0.1 NPM产生的背景

当一个网站依赖的库越来越多，前端开发就很麻烦：

去 jQuery 官网下载 jQuery
去 BootStrap 官网下载 BootStrap
去 Underscore 官网下载 Underscore
……

对网站依赖的代码，到处找网站下载很不方便，而用一个工具把这些代码集中到一起来管理就很有必要。这个工作的完成者是 Isaac Z. Schlueter ！解决办法就是 NPM.

NPM 的思路大概是这样的：

1. 买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

3. 社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里，可以随意使用了。

这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。

6.0.2 NPM基本使用

1，install

  npm install express      # 本地安装
  npm install express -g   # 全局安装

2，使用packge.json
npm init

npm init --yes  # 默认安装
npm init -y     # 默认安装

npm install <package_name> --save      # add to your package.json's dependencies:
npm install <package_name> --save-dev  # add to your package.json's devDependencies

"dependencies": These packages are required by your application in production.
"devDependencies": These packages are only needed for development and testing.

6.1 browserify

随着JavaScript程序逐渐模块化，在ECMAScript 6推出官方的模块处理方案之前，有两种方案在实践中广泛采用：一种是AMD模块规范，针对模块的异步加载，主要用于浏览器端；另一种是CommonJS规范，针对模块的同步加载，主要用于服务器端，即node.js环境。Browserify是一个node.js模块，主要用于"改写"现有的CommonJS模块，使得浏览器端也可以使用这些模块。

用法简介：

比如，我写一个如上面图片所示的目录，每个js文件里面是一个模块：

content.js

exports.text = 'hello world. and I will be a great gay.'

consoleContent.js

var content = require ('./content.js')
exports.sayIt = function () {

  console.log ('message from consoleContent ' + content.text)
}
exports.name = function (name) {
  return 'my name is:' + name || 'xiaoming';
}

main.js

var consoleContent = require ('./consoleContent.js')
consoleContent.sayIt()
alert (consoleContent.name('xiaobai') )

那么，在index.html 中引入一个打包后的bundle.js文件。

<!doctype html>
<head>
  <title>browerify</title>
</head>
<body>
  <script src='./dist/bundle.js'></script>
</body>

那么，需要browerify做那些事情，

browserify ./src/main.js > ./dist/bundle.js # 打包

实时跟踪文件的变化：

npm install watchify -g

watchify ./src/main.js -o ./dist/bundle.js -v

结合 npm run

配置 packge.json 在里面的scripts:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify ./src/main.js -o ./dist/bundle.js",
    "watch": "watchify ./src/main.js -o ./dist/bundle.js -v"
  },

当运行 npm run build 时，就等同于运行： browserify ./src/main.js -o ./dist/bundle.js。同理 npm watch.

6.2 Webpack

webpack是当下非常流行的打包工具，现在的前端开发几乎离不开webpack

其相关概念和举例已在我的两篇博客中单独写出。

webpack4的基本使用

webpack使用示例（一）

webpack使用示例（二）

webpack的深入学习，可以给开发便捷性和代码优化带来很大好处。也是一个需要掌握的基本知识。

参考链接：

JavaScript模块化7日谈