美文网首页
npm-npmscript-gulp-webpack

npm-npmscript-gulp-webpack

作者: saintkl | 来源:发表于2017-08-28 11:42 被阅读0次
题目1: 如何全局安装一个 node 应用?

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

  • 全局安装
    $ npm install -g 应用名称
  • 本地安装
    $ npm install 应用名称
题目2: package.json 有什么作用?

package.json文件:定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。
npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
package.json文件可以手工编写,也可以使用npm init命令自动生成。所有问题之中,只有项目名称(name)和项目版本(version)是必填的,其他都是选填的。
有了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": {             //scripts指定了运行脚本命令的npm命令行缩写
        "start": "node index.js"//npm run star
    },
    "dependencies": {  //项目运行所依赖的模块
        "express": "latest"
    },
    "devDependencies": {//项目开发所需要的模块
        "bower": "~1.2.8"
    }
}
题目3: npm install --save app 与 npm install --save-dev app有什么区别?

npm install --save app自动把模块app添加到dependencies部分
npm install --save-dev app 自动把模块app添加到devdependencies部分
dependencies:项目依赖的模块,npm install 会自动下载其中的模块。
devdependencies:开发依赖的模块,主要是配置测试框架,npm install 不会自动下载。

题目4: node_modules的查找路径是怎样的?

require("moduleA")依赖的模块不加./和../以及/的规则是从当前node_modules 文件夹加载,如果找到了就停止,如果没有就查找上层目录的node_modules文件夹,只要找到或者查到根路径为止
比如, 如果当前文件是'/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//根路径

题目5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)

参考npm2 npm3 yarn 的故事

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

Webpack 是一个模块打包器,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情。
webpack的官网: http://webpack.github.io/ ,文档地址: http://webpack.github.io/docs/

webpack 的优势

  • 代码拆分:Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
  • Loader:Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。
  • 智能解析:Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。
  • 插件系统:Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。
  • 快速运行:Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。
题目7:npm script是什么?如何使用?

npm 不仅可以用于 模块管理,还可以用于 执行脚本,npm script是写在package.json文件里面,用scripts字段定义脚本命令。
使用示例
//a
{
// ...
"scripts": {
"build": "node build.js"
}
}
上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node build.js。
命令行下使用npm run命令,就可以执行这段脚本。
$ npm run build
# 等同于执行
$ node build.js
参考npm scripts 使用指南

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

代码地址
效果展示

题目9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并。
  • gulp是什么
    gulp是基于Nodejs的自动任务运行器, 能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。
  • 使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
    步骤(由于基于node,首先需要下载node)
    1.全局安装gulp:
    $ npm install gulp -g
    2.本地安装gulp(在项目所在文件夹内安装):
    $ npm install gulp -D
    注:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件方便
    a. 依赖模块的路径,gulp所在的node_modules,没有本地安装,需要手动更改;
    b. 不同项目依赖的模块版本
    3.下载需要的gulp插件
    #图片压缩
    $ npm install gulp-imagemin -S;
    #js压缩
    $ npm install gulp-uglify -S;
    #css压缩
    $ npm install gulp-clean-css -S;
    #文件合并
    $ npm install gulp-concat -S;
    4.新建gulpfile.js文件:gulp项目的配置文件,一般位于项目根目录的普通js文件,
    代码如下:
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    uglify = require('gulp-uglify'),
    cleanCSS  = require('gulp-clean-css'),
    concat = require('gulp-concat')
//定义任务
gulp.task('image',function(arument){
  return gulp.src('src/images/*')//需要处理的文件路径
          .pipe(imagemin())
          .pipe(gulp.dest('dist/images'))//操作后存放的路径;此例放在dist/images

});
gulp.task('js',function(arument){
  return gulp.src('src/js/*.js')
          .pipe(uglify())
          .pipe(concat('all.js'))//参数必填,压缩后的js名
          .pipe(gulp.dest('dist/js/'))

});
gulp.task('css',function(arument){
  return gulp.src('src/css/*.css')
          .pipe(cleanCSS({compatibility: 'ie8'}))
          .pipe(concat('all.css'))//参数必填,压缩后的css名
          .pipe(gulp.dest('dist/css/'))

})
gulp.task('build', ['css', 'js', 'image']);
//命令行执行 gulp build ,实现src目录下的css、js合并压缩,图片压缩,最后放入 dist目录下;
题目10: 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

npm install hunger-weather -g
weather

代码地址
npm地址

相关文章

  • npm-npmscript-gulp-webpack

    题目1: 如何全局安装一个 node 应用? npm install -g xxx 题目2: package.js...

  • npm-npmscript-gulp-webpack

    1: 如何全局安装一个 node 应用? npm install -g app 2: package.json 有...

  • npm-npmscript-gulp-webpack

    1.如何全局安装一个 node 应用? 在终端输入以下命令,即在全局安装应用,可在终端输入fanyi、webpac...

  • npm-npmscript-gulp-webpack

    题目1: 如何全局安装一个 node 应用? “全局安装”指的是将一个模块安装到系统目录中,各个项目都可以调用。一...

  • npm-npmscript-gulp-webpack

    如何全局安装一个 node 应用? 将安装包放在 /usr/local/lib/node_modules 下 可...

  • npm-npmscript-gulp-webpack

    1: 如何全局安装一个 node 应用? npm是一个node包管理和分发工具,有了npm,可以很快的找到特定服务...

  • npm-npmscript-gulp-webpack

    题目1: 如何全局安装一个 node 应用? npm install -g 题目2: package.json 有...

  • npm-npmscript-gulp-webpack

    1. 如何全局安装一个 node 应用? 2. package.json 有什么作用? 命令行 npm init ...

  • npm-npmscript-gulp-webpack

    1. 如何全局安装一个 node 应用? 使用npm install -g packageName命令来全局安装n...

  • npm-npmscript-gulp-webpack

    1.一如何全局安装一个 node 应用? npm i xxx一般全局安装之后,还要在本地安装一次,npm i --...

网友评论

      本文标题:npm-npmscript-gulp-webpack

      本文链接:https://www.haomeiwen.com/subject/dhhnrxtx.html