、将代码模块化之后，我们需要模块加载器来管理这些模块

**npm

*解析
node package managernode包管理器是基于couchdb的一个数据库，
详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。

*作用
管理node包pakeage，包括：安装、卸载、更新、查看、搜索、发布等。
将开发者从繁琐的包管理工作中解放出来，更加专注于功能的开发。
类似App Store 、豌豆荚、360助手的用途

*使用
1 安装Node同时获赠npm
2 在GitBush里通过命令行操作
○ npm -v 查看npm版本号
○ sudo npm install npm -g 更新npm版本

3 下载package
○ npm install xxxx 本地安装 ● 存放在当前node_modules文件夹 ● 只能在当前目录下使用，通过require调用
○ npm install -g xxxx 全局安装 ● 存放在指定系统文件夹/usr/local/lib/node_modules ● 供命令行(command line)使用的，比如grunt，无法require ● 可能会有权限限制=> sodu...... 管理员身份 ● 可能比较慢=> cnpm...... 国内镜像地址
○ npm uninstall xxxx 卸载

**4 发布package **
○ npm init 在当前目录下生成配置文件 package.json

■ package.json
· □ 解析：以key&vaule的形式列出一个清单 □ 作用：配置pkg的基本信息；指导npm如何安装这个pkg □ 重要属性： bin 可执行文件目录 => 设置全局快捷键(写入path命令) scripts 定义一些操作方式 => 设置本地快捷键 dependencies 运行pkg功能时的依赖包 => 产品模式 devDependencies 开发pkg时的依赖包（测试用）=> 开发模式

○ npm install --save xxxx 安装的同时，在配置信息dependencies上保存这个运行依赖包的信息
○ npm install --save-dev kkkk 安装的同时，在配置信息devDependencies上保存这个开发依赖包的信息

■ 有了package.json文件： □ 直接 npm install 就可以安装所有的(运行+开发)依赖包到node_modules中 □ 所以提交代码时，也不用提交node_modules这个文件夹了 □ 执行 npm install --production 即选择产品模式，就只安装dependencies里的依赖包了

■ scripts 在本地使用node时： □ 执行scripts里的key值，就运行vaule里的命令; 即通过key值配置命令，通过vaule值配置命令代码 □ npm key key值是npm规定范围内的单词，直接运行 ; □ npm run key key值不是npm规定范围内的词，要加run才可以运行

■ bin在全局使用node时： □ 全局安装时，pkg被放入指定系统文件夹/usr/local/lib/node_modules，同时在/usr/local/bin下创建一个快捷方式，指向/usr/local/lib/node_modules 此时pkg就是一个命令行工具了 => □ 输入bin信息的 key值就运行vaule里指向的文件即通过key值配置全局命令，通过vaule值配置命令文件的地址 □ 这个属性和本地没关系！用不上！

■ node_modules 查找模块时： □ requeire() 有三种形式：绝对路径 / 相对路径 / node封装好的核心模块(比如path) 如果是以上三种形式，就根据地址直接找 □ 如果不是以上三种形式，就在上一级目录递归查找 node_modules目录 □ 如果查找玩所有的module.path数组还没有，就报错

■ 总结一下，如何发布一个包：
0 注册npm 得到ID
1 npm init 创建package.json，配置pkg信息? 加入github地址
2 npm install --save安装依赖包，并计入pkg信息
3 bin.js新建可执行文件，require(./index) =>指向主文件 :(可以理解为创建快捷方式吧
4 index.js新建主程序文件，require(xxxx) 使用依赖包，编译代码
5 npm login登录npm
6 npm publish发布pkg

*版本区别
○ npm2 ：以pkg依赖来安装，纯粹的不共享包原则=>重复安装
○ npm3 ：以pkg字母序安装，优先安装在第一层级目录=> 避免重复安装
○ yarn versus npm ：互联网巨头对npm进行优化后得到的一个包管理器，改善了npm一些版本管理混乱；重复下载；下载速度慢等问题。

*webpack

module building system
虽然npm完成了js模块管理，
但是前端代码还需要处理类似CSS、png、webfonts等非JS的文件。
所以我们需要一个既能处理JS又能处理别的资源文件的加载器。

*解析
webpack 是一个前端资源模块化管理和打包工具。
webpack不关心模块内容、文件格式，所有文件都是模块,只是处理的方式不同；
它只是按配置文件中规定的方式来处理相应模块。

*作用
它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

*优点
○ 1模块不一定要遵守 CMD 或 AMD 等规范
○ 2只打包真正被依赖的资源，按需加载
○ 3可以深度定制打包方案

*配置文件
webpack.config.js □ 解析：以module.exports对象作为一个出口以key&vaule的形式列出一个清单 □ 作用：构建一个兼容本地开发和生产环境的富应用web工程。 □ 重要属性： entry 定义整个编译过程的起点 output 定义整个编译过程的终点 module 定义模块module的处理方式 plugin 对编译完成后的内容进行二度加工 resolve.alias 定义模块的别名

*使用过程
1 使用npm安装webpack
2 写好配置文件webpack.config
3 写好主文件main.js
4 执行webpack生成编译后的主文件

举例            
webpack-demo         目标目录
  ►index.html            网页                     
  ►webpack.config.js     webpack配置文件
  ►webpack_JS            webpack目录
    ▼dist                   输出目录
      ▷main.js                 编译后的主文件
    ► module1.js            模块1
    ► module2.js            模块2
    ► main.js               引用了模块的主程序文件

**gulp

*解析
○ 基于Nodejs的一个自动化、批量化地处理重复性工作的自动任务运行器。
○ 与webpack侧重于模块打包不同，gulp侧重于流程管理。
○ 借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入 ..使得在操作上非常简单。

*作用
自动化地完成 javascript/coffee/sass/less/html/image/css等文件的
测试 => 检查 => 合并 => 压缩 => 格式化 => 浏览器自动刷新 => 部署文件生成
并监听文件在改动后重复指定的这些步骤。

*使用过程
1 npm install gulp-cli -g全局安装gulp（无法require）
2 npm init生成package.json
3 npm install --save-dev xx 本地安装gulp 并写入开发依赖
4 npm install --save-dev kk本地安装gulp插件
5 新建 gulpfile.js 使用插件编译代码
6运行任务`

gulp API
      gulp.src   引入需要处理的文件
      gulp.dest  导出处理好的文件
      gulp.task  定义一个任务
      guip.watch 监听任务变化
demo
    ■ 图片压缩
     □ 安装插件
       npm install --save gulp-imagemin  

     □ 使用插件
       gulpfile.js 
         var gulp = require('gulp');
         var imagemin = require('gulp-imagemin');     引入插件
         gulp.task('img', function(argument){         定义一个test任务
             gulp.src('src/imgs/*.img')               处理所有.img后缀的文件
                 .pipe(imagemin())                    任务调用的模块
                 .pipe(gulp.dest('dist/imgs'));       处理之后的文件 
         });


    ■ CSS 压缩合并：
     □ 安装插件
         $ npm install --save gulp-minify-css
         $ npm install --save gulp-rename
         $ npm install --save gulp-concat

     □ 使用插件
       gulpfile.js
         var gulp = require('gulp');
         var concat = require('gulp-concat');
         var minifycss = require('gulp-minify-css');
         var rename = require('gulp-rename');
         gulp.task('css', function(argument) {
             gulp.src('src/css/*.css')
                 .pipe(concat('merge.css'))
                 .pipe(rename({
                     suffix: '.min'
                 }))
                 .pipe(minifycss())
                 .pipe(gulp.dest('dist/css/'));
         });


    ■ JS 压缩合并：
     □ 安装插件
         $ npm install --save gulp-uglify
         $ npm install --save gulp-concat
         $ npm install --save gulp-rename

     □ 使用插件
       gulpfile.js
         var gulp = require('gulp');
         var concat = require('gulp-concat');
         var uglify = require('gulp-uglify');
         var rename = require('gulp-rename');
         gulp.task('js', function(argument) {
             gulp.src('src/js/*.js')
                 .pipe(concat('merge.js'))
                 .pipe(rename({
                     suffix: '.min'
                 }))
                 .pipe(uglify())
                 .pipe(gulp.dest('dist/js/'));
         });

参考资料
Linux 命令大全
webpack技术讲解及入门

模块加载器：npm · webpack · gulp

**npm

*webpack

**gulp

你可能感兴趣的:(模块加载器：npm · webpack · gulp)