npm、npmscripts、webpack介绍

作者: 放风筝的小小马 | 来源:发表于2017-07-25 12:16 被阅读40次

npm、npmscripts、webpack介绍
WebPack4总结
2021-03-19webpack理解记录
webpack
webpack教程
Webpack
webpack vue步骤
webpack安装及配置套餐
webpack-Learning
webpack-bundle-analyzer分析SPA应用

npm常见命令

npm install -g app-name

webpack命令

显示npm下载包时，发的每一个请求：npm config set loglevel http
关闭npm显示的进度条：npe config set process false

package.json 有什么作用？

每个项目下面都有一个package.json文件，定义了这个项目中所需要的模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令会根据这个配置文件，自动下载所需要的模块，也就是配置项目所需的运行和开发环境。

package.json可以手动编写，也可以通过npm init自动生成，有了package.json，就可以通过npm install安装其中指定的模块

一个package.json的例子：

{
    "name": "Hello World",
    "version": "0.0.1",
    "author": "张三",
    "description": "第一个node.js程序",
    "keywords":["node.js","javascript"],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",
    "engines": {"node": "0.10.x"},
    "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
    "contributors":[{"name":"李四","email":"lisi@example.com"}],
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "latest",
        "mongoose": "~3.8.3",
        "handlebars-runtime": "~1.0.12",
        "express3-handlebars": "~0.5.0",
        "MD5": "~1.2.0"
    },
    "devDependencies": {
        "bower": "~1.2.8",
        "grunt": "~0.4.1",
        "grunt-contrib-concat": "~0.3.0",
        "grunt-contrib-jshint": "~0.7.2",
        "grunt-contrib-uglify": "~0.2.7",
        "grunt-contrib-clean": "~0.5.0",
        "browserify": "2.36.1",
        "grunt-browserify": "~1.3.0",
    }
}

name: 项目名称
version：项目版本
scripts: 指定了运行脚本命令的npm命令行缩写，"start": "node index.js"——当执行npm run start时，会执行node index.js命令
dependencies字段和devDependencies字段
dependencies字段指定了项目运行所依赖的模块，devDependencies字段指定了项目开发所需要的模块。
他们都指向一个对象。该对象的各个成员，分别由“模块名”和“对应的版本要求组成”，表示依赖的模块和版本范围

{
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

对应的版本加上各种限定，主要有以下几种：

指定版本：例如：1.2.2，遵循的是“大版本.次要版本.小版本”的格式，安装时，只安装指定版本

波浪号+指定版本：例如：~1.2.2，表示安装1.2.x的最新版本，版本不小于1.2.2，同时不大于1.3.x，也就是安装时不改变大版本和次要版本。

插入号+指定版本：例如：^1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x的版本，也就是说不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

latest：安装最新版本

如果一个模块不在package.json文件之中，可以通过
npm install module --save
npm install module --save-dev
这两个命令安装，
--save参数：表示将模块写入“dependencies”属性中
--save-dev参数：表示将模块写入“devDependencies”属性中

bin字段
该项用于定义执行内部命令时，指定的可执行文件的位置，可与script项配合使用

"bin": {
  "someTool": "./bin/someTool.js"
}

上面代码指定，someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件，在node_modules/.bin/目录下建立符号链接。在上面的例子中，someTool.js会建立符号链接npm_modules/.bin/someTool。由于node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些脚本。

因此，像下面这样的写法可以采用简写。

scripts: {  
 start: './node_modules/someTool/someTool.js build'
}
// 简写为
scripts: {  
 start: 'someTool build'
}

所有node_modules/.bin/目录下的命令，都可以用npm run [命令]的格式运行。在命令行下，键入npm run，然后按tab键，就会显示所有可以使用的命令。

main字段
该字段指定了加载的入口文件。这个字段的默认值，就是模块根目录下的index.js文件
config字段
该字段用于添加命令行的环境变量

下面是一个package.json文件。

{
"name" : "foo",
"config" : { "port" : "8080" },
"scripts" : { "start" : "node server.js" }
}

---
##  npm install --save app 与 npm install --save-dev app有什么区别?
`npm install --save app`： 在当前目录下安装模块，并将模块添加到`package.json`中的`dependencies`属性中
`npm install --save-dev app`：与`npm install --save app`命令类型，只不过是将模块添加到`packag.json`中的`devDependencies`属性中

---

## node_modules的查找路径是怎样的?
node_modules的模块查找路径，说到底就是通过`require()`函数引入模块时的查找路径。
>当 Node 遇到 require(X) 时，按下面的顺序处理。
1. 如果X是内置模块，如: `require('http')`
  a. 返回该模块，
  b. 不再继续执行
2. 如果X是以 `"./"` 或 `"/"` 或 `"../"` 开头
  a. 根据X所在的父模块，确定X的绝对地址
  b. 将X当成文件，依次查找下面的文件，只要有一个存在，就返回该文件，不再继续执行
  - X
  - X.js
  - X.json
  - X.node

>  c. 将X当成目录，依次查找一下文件，只要有一个存在，就返回该文件，不再继续执行
  - X/package.json（中的main字段）
  - X/index.js
  - X/index.json
  - X/index.node
3. 如果X不带路径
  a. 根据X所在的父模块，确定X可能的安装目录
  b. 依次在每个目录中，将X当成文件或目录名加载
4. 抛出 "not found"

一个例子：
当前脚本文件`/home/ry/project/foo.js`执行了`require('bar')`，属于上面的第3种情况，Node内部运行过程如下：
首先，确认X的绝对路径可能是下面的几种情况，依次查找：
>- /home/ry/project/node_modules/bar
- /home/ry/node_modules/bar
- /home/node_modules/bar
- /node_modules/bar

搜素时，Node先将bar当成文件名，依次尝试加载下面这些文件，只要有一个成功就返回
> - bar
- bar.js
- bar.json
- bar.node

如果都不成功，说明bar可能是目录名，于是依次尝试加载下面这些文件
> - bar/package.json（main字段）
- bar/index.js
- bar/index.json
- bar/index.node

如果在所有对应的目录中，都无法找到对应的目录或文件，就抛出一个错误
参考：[require() 源码解读](http://www.ruanyifeng.com/blog/2015/05/require.html)

---

## npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)
npm3对于包的依赖处理不同于npm2
**npm2**：按照一个嵌套方式安装所有依赖
**npm3**：试图减轻树的深度和冗余的嵌套，将传统的嵌套结构改为平铺结构

**yarn与npm相比的优势**：
- yarn.lock 文件
  Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。
- 并行安装
- 更简洁的输出
[Yarn vs npm：你需要知道的一切](https://zhuanlan.zhihu.com/p/23493436)

---

## webpack是什么？和其他同类型工具比有什么优势？
webpack是一个JavaScript应用程序的**模块打包器**。当使用webpack处理应用程序时，它会递归的构建一个**依赖关系图**，其中包含应用程序需要的每个模块，然后将应用程序打包成少量的**bundler**——通常只有一个，由浏览器加载。

与其他打包工具相比，webpack具有：
- **代码分割**：
- **Loaders**：通过Loader机制，可以将各种类型的资源转换为js的模块
- **插件机制**：拥有非常丰富的插件

---

## npm script是什么？如何使用？
npm script是package.json中的一个属性，利用该属性可以自定义一些脚本命令
通过: `npm run xxx`来执行xxx命令，如果xxx是npm中的默认命令，则无需添加run，直接使用`npm xxx`即可。
如：
```js 
{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

执行： node run build 即可执行node build.js命令

使用 webpack 替换入门-任务15中模块化使用的 requriejs

演示地址

gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp是一款基于数据流的自动化构建工具

一个gulpfile.js文件
// 载入模块
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    minhtml = require('gulp-htmlmin'),
    notify = require('gulp-notify'),
    md5 = require('gulp-md5-plus');


// css任务
gulp.task('css', function() {
  gulp.src('dist/css/*').pipe(clean());
  return gulp.src('./www/src/css/*.css')
   //      .pipe(concat('merge.min.css'))
           .pipe(minifycss())
         .pipe(md5(10, 'dist/index.html'))
           .pipe(gulp.dest('dist/css/'));
});

// html任务
gulp.task('html', function(){
  return gulp.src('./www/src/index.html')
         .pipe(minhtml({collapseWhitespace: true}))
         .pipe(gulp.dest('dist'))
});

// js任务
gulp.task('js', function(){
  gulp.src('./dist/app.bundle.js')
      .pipe(jshint())
      .pipe(concat('merge.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('dist/js/'))
});

// img任务
gulp.task('img', function(){
  gulp.src('www/imgs/*')
      .pipe(imagemin())
      .pipe(gulp.dest('dist/imgs'))
});

// clean任务
gulp.task('clear', function(){
  gulp.src('./dist/*', {read: false})
      .pipe(clean());
});

gulp.task('build', ['html', 'css', 'js', 'img']);

开发一个 node 命令行天气应用用于查询用户当前所在城市的天气，发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

包地址：npm install -g hexon-hunger-weather2

npm、npmscripts、webpack介绍
npm常见命令 npm install -g app-name webpack命令显示npm下载包时，发的每一个...
WebPack4总结
一、webpack4新特性 1.mode属性二、webpack介绍安装：npm install webpack...
2021-03-19webpack理解记录
webpack命令的基本介绍安装webpack前的准备，创建package.json，用npm initnpm ...
webpack
npm install webpack -g npm init -y npm install webpack --...
webpack教程
webpack 安装node.js npm 安装webpack npm install webpack -g 进入...
Webpack
Webpack的安装 npm install webpack -g 安装全局webpack npm insta...
webpack vue步骤
1)安装webpack npm init --yes npm i webpack webpack-cli --sa...
webpack安装及配置套餐
npm uninstall webpack -g npm uninstall -g webpack-cli ...
webpack-Learning
Install： Global： npm i webpack -g Local: npm i webpack --...
webpack-bundle-analyzer分析SPA应用
介绍webpack-bundle-analyzer 这个插件来分析SPA应用。使用 npm install --...