*模块加载器Node.jsNPMWebpack基础汇总

Posted 2020-09-23

--------------------------------NODE应用中的Node.js command prompt和Node.js---------------------------------------

·安装node.js后，有两个可启动应用：黑色的Node.js command prompt和绿色的Node.js

·黑色的Node.js command prompt就和cmd DOS控制台一样，输入node -v后，若出现node的版本号，则表示当前node环境安装OK。

·当输入node命令后进入js编码环境，可以直接写js代码。当输入.exit时退出js编码环境。

·当输入npm -v明后，若出现npm版本号，则说明node.js已经集成了npm包管理器。

·绿色的Node.js中就和Node.js command prompt输入node进入js编码环境一样，可以直接写js代码。Node.js不能输入node -v命名，因为它本身是js的编码环境。

--------------------------------模块规范：CommonJS、AMD、CMD、ES6模块---------------------------------------

·模块化的作用：①实现js文件的异步加载，避免浏览器假死。②管理模块之间的依赖，便于模块的维护

·CommonJS:Node.js就是遵循的CommonJS规范，由exports输出模块，require引入模块，详细用法见Node.js章节。

·AMD：由于CommonJS引入模块是按同步引入的，当模块过大时会出现阻塞情况。所以CommonJS只适用于后端，前端的话则采用AMD(异步模块定义)规范。而require.js就是AMD规范的具体实现。具体用法：

require([‘moduleA‘, ‘moduleB‘, ‘moduleC‘], function (moduleA, moduleB, moduleC){

// some code here

});

·require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是[‘moduleA‘, ‘moduleB‘, ‘moduleC‘]，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

  require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

要是没什么依赖，就定义简单的模块，下面这样就可以啦：

// math.js

define(function (){

　　var add = function (x,y){

　　　　return x+y;

　　};

　　return {

　　　　add: add

　　};

});

加载如下：

//main.js

require([‘math‘,function(math){

    alert(math.add(1,1));

}])

·CMD：CMD也是异步加载模块，与AMD唯一的不同是对依赖模块的执行时机处理不同。具体为：AMD是依赖前置，一开始就加载所有依赖，js可以方便知道依赖模块是谁，立即加载；而CMD是依赖就近，需要使用模块时在define加载进来，较AMD更符合逻辑顺序。很多人觉得CMD的就近依赖需要把模块变为字符串解析一遍才知道依赖了那些模块，这样会影响性能，但实际上这对性能的影响很小，却能给开发带来逻辑上的便利性。

  国内大神玉伯开发Sea.js就是CMD的具体实现。

·ES6：ES6在语言标准的层面上实现了模块功能，完全可以取代 CommonJS、AMD和CMD规范，成为浏览器和服务器通用的模块解决方案。

  模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

----------------------------------------------Node.JS------------------------------------------------------

·根据CommonJS规范，一个单独的文件就是一个模块，require用来加载一个模块，exports用来向外部暴露该模块里的方法或属性。

  例如：// hello.js    →文件1（模块名1）

function say(username){    →文件中定义的方法

   console.log( ‘hello, ‘+username );

}

exports.say = shuo;   → 将文件中的say方法名暴露为shuo方法，其他文件可以直接访问。

// main.js    →文件2（模块名2）

var person = require(‘./hello‘);    →加载模块1，person相当于java的类

 

person.shuo(‘wenzi‘);      →输出hello, wenzi

person.shuo(‘师少兵‘);       →输出hello, 师少兵

person.shuo(‘NUC‘);       →输出hello, NUC

·node模块可分为核心模块、本地模块和通过NPM（Node Package Manager）安装的第三方模块。

·小结：

  Node取消了javascript的默认全局作用域，转而采用CommonJS模块系统，这样你可以更好的组

织你的代码，也因此避免了很多安全问题和bug。可以使用require函数来加载核心模块，第三方

模块，或从文件及目录加载你自己的模块还可以用相对路径或者绝对路径来加载非核心模块，如

果把模块放到了node_modules目录下或者对于用NPM安装的模块，你还可以直接使用模块名来加载。

地址：http://www.jb51.net/article/53808.htm

·require的加载路径：

①/.../.../.../xxx.js表示绝对路径

②./xxx.js表示相对路径(同一文件夹下的xxx.js)

③../表示上一级目录

④如果既不加/.../、../又不加./的话，则该模块要么是核心模块，要么是从一个node_modules文件夹加载。

---------------------------------------前端包管理工具：NPM-------------------------------------------------

·npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

·npm安装依赖包分为2中方法：

①全局安装：npm install gulp -g 或 npm install gulp --global

②本地安装：npm install gulp 或 npm install gulp --save-dev等，其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中。

·全局安装和本地安装的区别：

全局：可以使用npm root -g查看全局安装目录，一般在C:\Users\Administrator\node_modules下。用户可以在命令行中直接运行该组件包支持的命令。

本地：将安装包放在 ./node_modules 下(运行npm时所在的目录，可以通过cd命令调整目录)。通过require() 来引入本地安装的包。注意：npm的原理大概就是从当前目录往上找，找到哪个目录有node_modules就认为这才是真正的项目目录，所以东西全给装那里面去.所以你得保证从你当前的目录开始一直到根目录都没有node_modules，npm才会“正常”地把东西放到当前目录下的。所以本地没正确安装的办法就是①npm root找到其他安装了node_modules的文件夹，然后删除。②当然也可以先npm init再进行本地安装。

  本地安装的优点：可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖。另外，本地安装包对于项目的加载会更快。

  本地安装的缺点：每次新项目都要本地安装所依赖的包，安装包时间相对较长，一来是包太大导致下载慢；二是浪费了硬盘空间。

·package.json 位于模块的目录下，用于定义包的属性。

Package.json 属性说明:

  name - 包名。

  version - 包的版本号。

  description - 包的描述。

  homepage - 包的官网 url 。

  author - 包的作者姓名。

  contributors - 包的其他贡献者姓名。

  dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。

  repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。

  main - main 字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后require("express")。

  keywords - 关键字

·npm常用命令：

1、npm install <name> --save 

安装的同时，将信息写入package.json中项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到github时，就不用提交node_modules这个文件夹了。

2、npm view moduleNames：查看node模块的package.json文件夹

注意事项：如果想要查看package.json文件夹下某个标签的内容，可以使用$npm view moduleName labelName

3、npm list：查看当前目录下已安装的node包。(npm list -g：查看所有全局安装的模块)

注意事项：Node模块搜索是从代码执行的当前目录开始的，搜索结果取决于当前使用的目录中的node_modules下的内容。$ npm list parseable=true可以目录的形式来展现当前安装的所有node包

4、npm help：查看帮助命令

5、npm view moudleName dependencies：查看包的依赖关系

6、npm view moduleName repository.url：查看包的源文件地址

7、npm view moduleName engines：查看包所依赖的Node的版本

8、npm help folders：查看npm使用的所有文件夹

9、npm rebuild moduleName：用于更改包内容后进行重建

10、npm outdated：检查包是否已经过时，此命令会列出所有已经过时的包，可以及时进行包的更新

11、npm update moduleName：更新node模块

12、npm uninstall moudleName：卸载node模块

13、一个npm包是包含了package.json的文件夹，package.json描述了这个文件夹的结构。访问npm的json文件夹的方法如下：

$ npm help json 

此命令会以默认的方式打开一个网页，如果更改了默认打开程序则可能不会以网页的形式打开。

14、发布一个npm包的时候，需要检验某个包名是否已存在

$ npm search packageName

15、npm init：会引导你创建一个package.json文件，包括名称、版本、作者这些信息等

16、npm root：查看当前包的安装路径

npm root -g：查看全局的包的安装路径

17、npm -v：查看npm安装的版本

----------------------------------------前端构建工具:Webpack------------------------------------------------

·我们在创建一个前端项目时，常常有如下需求：

①SASS，LESS，CoffeeScript，Babel等的编译；

②每次Push主分支或npm发布都应首先运行代码风格检查和单元测试；

③资源压缩与合并；

④浏览器自动刷新；

⑤等等。

手动完成这些效率低，所以有大神开发了grunt、gulp、webpack这样的构建工具来自动完成这些工作。

·目前webpack最强大。

-----------------------------------------npm+webpack+ES6构建项目-------------------------------------------

·由于npm和webpack都依赖Node.js，所以需先安装Node.js环境。

·npm安装:Node.js安装时也会顺带装上npm，npm是包管理工具，项目需要什么包就将包下到项目中即可，所以npm全局安装即可，而无需在项目中也安装

  

·webpack安装：webpack建议在项目和全局中都安装。全局安装的作用是直接在命令行中使用，安装在项目中是可以让项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖。

·webpack的核心是配置webpack.config.js，如下是一个最简单的:

module.exports = {

    entry:{firstWebpack:__dirname+‘/app/main.js‘},  //entry属性是页面的主入口,firstWebpack是键，冒号后面是值

    output: {    //文件打包后会放到output属性所指定的文件目录下。

        path: __dirname+‘/build‘, //注意:__dirname，是2个下划线

        filename: ‘[name].bundle.js‘

    },

    module: {

loaders: [

  {test:/\.css$/,loader:‘style-loader!css-loader‘},

    {test:/\.scss$/,loader:"style-loader!css-loader!sass-loader"},  

//从右向左，先安装sass，再css，再style。css-loader是为了遍历你的css，style-loader是为了进行style标记生成

  {test: /\.js$/,loader: ‘babel-loader‘},

  {test: /\.(png|jpg)$/,loader: ‘url-loader?limit=40000‘}

]

    }，

    watch: true，  //每次修改保存webpack.config.js中引用文件，将自动编译。

};

·补充：

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要（极大压缩空间）

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了