*模块加载器、Node.js、NPM、Webpack基础汇总

--------------------------------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映射文件,告知哪些模块被最终打包到哪里了

时间: 2024-10-10 04:59:18

*模块加载器、Node.js、NPM、Webpack基础汇总的相关文章

解密javascript模块加载器require.js

require.config require.config设置require.js模板加载选项 // 定义config req.config = function (config) { return req(config); }; // 加载config配置项 req = requirejs = function (deps, callback, errback, optional) { var context, config, contextName = defContextName; //

js模块化/js模块加载器/js模块打包器

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

实现简单的 JS 模块加载器

实现简单的 JS 模块加载器 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块的定义,如果您之前有去思考过按需加载的原理,那你可能已经知道按需加载需要依赖一个模块加载器.它可以加载所有的静态资源文件,比如: JS 脚本 CSS? 脚本 图片 资源 如果你了解 webpack,那您可以发现在 webpack 内部,它实现了一个模块加载器.模块加载器本身需要遵循一个规范,当然您可以自定义规范,大

JS模块加载器加载原理是怎么样的?

路人一: 原理一:id即路径 原则.通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) .这里的 'a'.'b' 都是 ModuleId.通过 id 和路径的对应原则,加载器才能知道需要加载的 js 的路径.在这个例子里,就是 baseUrl + 'a.js' 和 baseUrl + 'b.js'. 但 id 和 path 的对应关系并不是永远那么简单,比如在 AMD 规范里就可以通过配置 Paths 来给特定的 id 指配 path. 原理二:crea

Sea.js 是一个模块加载器

1 模块定义define define(function(require,exports,module){ //require 引入需要的模块如jquery等 //var $ = require('./jquery'); //exports可以把方法或属性暴露给外部 exports.name = 'hi'; exports.hi = function(){ alert('hello'); } //module提供了模块信息 }); 2 使用定义好的模块seajs.use <!doctype ht

模块加载器

模块加载器 最近在做新项目的时候自己利用一点业余时间写了一个简单的js模块加载器.后来因为用了webpack就没有考虑把它放到项目里面去,也没有继续更新它了.模块加载器开源的有很多,一般来说seaJS和reqiureJS都能满足基本需求.本篇博文主要分享一下卤煮写这个加载器的一些想法和思路,作为学习的记录. js模块化加载已经不是一个新鲜概念了,很多人都一再强调,大型项目要使用模块化开发,因为一旦随着项目的增大,管理和组织代码的难度会越来越难,使得我们对代码的管理变得重要起来.当然,在后端模块化

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

SeaJS:一个适用于 Web 浏览器端的模块加载器

什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范.SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个. 为什么用SeaJS?假如我们要开发一个web应用App,在这个应用中需要使用jquery框架.App的首页index.html会用到module1.js,module1.js依赖module2

自研模块加载器(一) 模块系统概述与自定义模块规范书写规定

模块系统概述 CommonJs/AMD/CMD/ES6 Modules 什么是模块化? 模块化就是把系统分离成独立的功能的方法,需要什么功能,就加载什么功能 当一个系统越来越复杂时候,我们会遇到这些问题 1. 命名冲突 2. 文件依赖 使用模块化开发可以避免以上问题,并提升开发效率 1. 可维护性 2. 可复用性 在生产角度,模块化是一种生产方式,这种生产方式效率高,维护成本低. 模块化开发演变 1. 全局函数 早期开发中,将重复的代码封装成函数,将多个函数放在一个文件中. 缺点: 污染全局变量

自研模块加载器(四) 模块资源定位-异步加载

资源定位-动态加载 通过resolve方法进行异步解析,完整解析如下图所示: 根据上篇文章startUp.js代码,我们继续完善本章动态加载资源的代码. (function(global) { var startUp = global.startUp = { version: '1.0.1' } var data = {}; // 获取当前模块加载器配置信息 var cache = {}; // 缓存 //模块的生命周期 var status = { FETCHED: 1, SAVED: 2,