npm_npmscript_webpack_node应用

1. 如何全局安装一个 node 应用?

每个模块可以“全局安装”,也可以“本地安装”。
“全局安装”指的是将一个模块安装到系统目录中,各个项目都可以调用。一般来说,全局安装只适用于工具模块,比如eslint和gulp。例如:/user/local/bin/目录下。
“本地安装”指的是将一个模块下载到当前项目的node_modules子目录,然后只有在项目目录之中,才能调用这个模块。例如:./node-modules/

本地安装
npm install <package name>
卸载:npm uninstall -g XXX

全局安装
npm install -g <package name>

2.package.json 有什么作用?

npm init命令生成package.json文件,这个文件定义了项目所需的各种模板及相关配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

{
  "name": "cover_md",  //项目名称
  "version": "1.0.6",  //项目版本号
  "description": "一个 markdown 转 html 的小工具",  //入口文件
  "main": "index.js",  //指定了加载的入口文件,require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js
  "bin": { 
// bin参数是{ 命令名:文件名 }的格式,指定了各个内部命令对应的可执行文件的位置,相当于在user/local/bin下创建一个快捷方式,映射到对应的文件,执行所映射的文件
// 执行`convert`命令时,将运行对应文件(./bin/server)
// ./bin/convert文件头部需添加 #!/usr/bin/env node, 表示将以node运行这个文件

    "convert": "./bin/convert"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" 
    "start" : "node app.js" //执行当前目录下app.js
      //一般默认一个test的空文件夹、用作写测试代码,`npm test`即可运行。
      //自定义的命令名需加run才能与运行,`npm run make`
  },
  "keywords": [  //关键字,是一个字符串的数组,也有助于人们在npm搜索你的包
    "markdown",
    "html",
    "convert"
  ],
  "author": "wcon",  //作者名称
  "license": "ISC", //协议
  "repository": {
    "type": "git",   //该包在github上的代码托管仓库地址
    "url": "git+https://github.com/wcongratulation/markdow.git"
  },
  "dependencies": {   // 正式使用时依赖的包, npm install --save xxx 生成
        "my_dep": "^1.0.0"
    },
  "devDependencies" : {  //开发或者测试时,依赖的包。npm install --save-dev xxx生成
        "my_test_framework": "^3.1.0"
    }
  "bugs": {
    "url": "https://github.com/wcongratulation/markdow/issues" //一个对象,包含url网址和邮箱,当使用者发现问题时,可以通过这两种方式提交问题
  },
  "homepage": "https://github.com/wcongratulation/markdow#readme"  //主页,项目主页的地址
}

3.npm install --save app 与 npm install --save-dev app有什么区别?

如果将node_modules文件夹删掉,则执行npm install默认会安装dependencies字段和devDependencies字段中的所有模块。

这两条命令都会下载app到node_modules文件夹下面,不同之处在于:
npm install --save app:模块名app将被添加到package.json下的dependencies。
npm install --save-dev app:模块名app将被添加到package.json下的devDependencies。

此外:dependencies下的模块,是我们生产环境中需要的依赖,devDependencies只用于开发阶段完成集成测试等功能模块依赖。因此,执行npm install server-mock时,只会下载它依赖层级dependencies下的模块,而不会下载devDependencies的模块,需要手动下载。

4.node_modules的查找路径是怎样的?

  • 1.如果require的内容以./或者../开头的按照正常的查找路径。
  • 2.require内容不加./或者../查找的js文件。比如需要查找的依赖包叫“easytpl”,它会先在当前目录下查找node_module, 看有没有easytpl文件夹(即easytpl包),如果有的话,会读取easytpl文件夹下的package.json,找到里面的main参数,加载main里对应的路径的文件。如果当前目录下没有node_module,或当前目录下的node_module没找到easytpl,便向上级目录中查询,直到系统根目录。
  • 3.node全局安装在系统根目录下,所以全局安装后可在所有目录下使用。
如果当前文件是'/home/ry/projects/foo.js' 然后require('bar.js'), 那么node将会按照以下路径查找
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

nodejs路径repuire的路径规则https://my.oschina.net/lirongfei/blog/163069

5.npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势?

npm2和npm3有一个很大的区别, 就是组织包的结构. npm2组织依赖的包是按照树形组织的. npm3将其改进为扁平结构。
npm2会将所依赖的包存放到当前目录的./node_modules/目录下. 而被安装的包又会依赖其他的包的话, 则会存放到该包的./node_modules下. 所以, 当依赖结构很复杂的时候, 目录结构会非常深. 不管是性能还是操作上, 体验都不怎么好。
而在npm3中, 采用扁平的目录结构, 二级依赖会放到当前目录的node_modules的里, 与一级包在同一目录。

例如:
比如,有一个模块A,依赖 B。npm3会将模块B放置到与A同级目录下,而npm2会将B放置到A的依赖模块目录下

Paste_Image.png

npm2,一个 App 里模块 A 和 C 都依赖B,无论被依赖的 B 是否是同一个版本,都会生成对应结构。

npm3,npm install 时会按照 package.json 里依赖的顺序依次解析,遇到新的包就把它放在第一级目录,后面如果遇到一级目录已经存在的包,会先判断版本,如果版本一样则忽略,否则会按照 npm2 的方式依次挂在依赖包目录下


Paste_Image.png

npm3也存在开发环境和测试环境的 node_modules 目录结构不一样以及其他的问题,因此FaceBook搞了 yarn 用来替代 npm

  • 快速—会缓存已经下载过的包,避免重复下载
  • 安全 — 下载前会检查签名及包的完整性
    yarn 构建步骤如下:
    Resolution: 向仓库请求依赖关系
    Fetching: 看看本地缓存了没有,否则把包拉到缓存里
    Linking: 直接全部从缓存里构建好目录树放到 node_modules 里

参考 npm2 npm3 yarn 的故事
这里的缓存机制很像 mvn 之类的,而且其还引入了 lockfile 用于锁定版本号,这很类似 shrinkwrap,不过格式比 npm-shrinkwrap.json 更好 review。除了这些特别明显的改进,还有很多体验上的提升,具体可以看官方博客

6.webpack是什么?和其他同类型工具比有什么优势?

WebPack是一个模块化加载器兼打包工具,它同时支持AMD、CMD等加载规范。
它能够打包WebHTML、js、CSS以及各种静态文件(图片、字体等)。
对于不同类型的资源,webpack有对应的模块加载器。
webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。
优势:

  • 1.代码分割:按需加载模块
  • 2.Loaders:通过加载器我们可以将其他类型的资源转换为JS输出
  • 3.webpack提供了强大的插件系统,当webpack内置的功能不能满足我们的构建需求时,我们可以通过使用插件来提高工作效率。因为它可以加载几乎所有的第三方库

7.npm scripts 是什么?如何使用?

npm script 是 package.json 中的一个属性
可以在这个属性中自定义 npm 命令,输入这个命令就会执行指定的操作
如:

// 在 package.json 中
{
  ...
  'script': {
    'create': 'mkdir app'
  }
  ...
}

// 在命令行中输入:
$ npm run create
// 就会运行指令 mkdir app, 表示创建一个文件app

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

gulp:

  • 它是一款nodejs应用。

  • 它是打造前端工作流的利器,打包、压缩、合并、git、远程操作...,

  • 简单易用

  • 无快不破

  • 高质量的插件

gulp 实现图片压缩

第一步、在命令行输入

npm install --save-dev gulp-imagemin
前提是要安装了 gulp
第二步、创建 gulpfile.js 文件编写代码

// 获取 gulp
var gulp = require('gulp')
    // 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function() {
    // 1. 找到图片
    gulp.src('images/*.*')
        // 2. 压缩图片
        .pipe(imagemin({
            progressive: true
        }))
        // 3. 另存图片
        .pipe(gulp.dest('dist/images'))
});


// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function() {
        gulp.watch('images/*.*', ['images'])
    })
    // 使用 gulp.task('default') 定义默认任务
    // 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])

CSS 压缩合并
第一步、在命令行输入

npm install gulp-minify-css

第二步、创建 gulpfile.js 文件编写代码

// 获取 gulp
var gulp = require('gulp')

// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require('gulp-minify-css')

// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
    // 1. 找到文件
    gulp.src('css/*.css')
    // 2. 压缩文件
        .pipe(minifyCSS())
    // 3. 另存为压缩文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改,当文件被修改则执行 css 任务
    gulp.watch('css/*.css', ['css'])
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])

JS 压缩合并
第一步、
npm install gulp-uglify
第二步

// 获取 gulp
var gulp = require('gulp')

// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify')

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改,当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])
···
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容