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

npm-npmscript-gulp-webpack

作者: kumabearplus | 来源:发表于2017-06-09 21:25 被阅读27次

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

    npm install -g kuma-weather
    

    2.package.json 有什么作用?

    • npm init 会在当前目录下生成package.json的文件
    • package.json用于配置模块包的基本信息、依赖管理、使用方式、可执行文件地址、主程序入口等。
    "main": "index.js"
    

    main字段指定了加载的入口文件,require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。

    "bin": {
        "weather": "./index.js"
      }
    

    bin参数是{ 命令名:文件名 }的格式,bin即代表二进制。bin参数指定了各个内部命令对应的可执行文件的位置,相当于在/user/local/bin下创建了内部命令的快捷方式。执行weather相当于加载index.js。index.js文件的头部要写上#!/usr/bin/env node, 表示以node运行这个二进制文件

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "git add .; git commit -am 'update'; git push",
        "creatfile": "touch 1.js",
        "delete": "rm -rf 1.js"
      }
    

    可将开发中一系列复杂或者繁琐的操作一次编辑完并给其指定一个代号(keyName),在执行环境下只要直接输入对应的 npm run keyName即可批处理执行,提高开发效率。

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

    • npm install -save xxx会将依赖xxx模块安装在局部,同时将xxx保存到package.json中的dependencies字段中。在package.json文件夹下执行npm install时会自动下载这些项目依赖。
    • npm install -save-dev xxx会将依赖xxx安装在局部,同时将xxx保存到package.json中的devDependencies字段中。通过npm install命令不会自动下载这些依赖,必须通过手动下载。

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

    1. require的内容以./或者../开头的按照正常的查找路径。
    1. require内容不加./或者../查找的js文件(非核心模块)。先从当前目录下的nodule_modules查找,不存在就依次向上递归查找,到上级目录的nodule_modules中查找,直到系统根目录。

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

    • npm3在npm2简单直接安装依赖包(树形结构下载)的基础上加了些算法。它会按照package.json里的依赖顺序依次解析,遇到新的包就把它放在第一级目录,后面如果遇到一级目录已存在的包则先判断版本,版本一致则忽略,否则按照npm2的方式依次挂在依赖包目录下。
    • yarn的优势:
    • 多平台精准校准,只要将yarn.lock保存到源码库,任何地方安装,版本都不会出现偏差。
    • 速度快,节约时间。
    • 支持clean命令,可以快速清理包文件。
    • 一个单独的请求不会导致整个安装失败,可以反复重试直到链接恢复正常。

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

    • Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
    • 优势:
    • 对 CommonJS 、 AMD 、ES6的语法做了兼容
    • 对js、css、图片等资源文件都支持打包
    • 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持
    • 有独立的配置文件webpack.config.js
    • 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
    • 支持 SourceUrls 和 SourceMaps,易于调试
    • 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活
    • webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

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

    "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "git add .; git commit -am 'update'; git push",
    "creatfile": "touch 1.js",
    "delete": "rm -rf 1.js"
    }

    可将开发中一系列复杂或者繁琐的操作一次编辑完并给其指定一个代号(keyName),在执行环境下只要直接输入对应的 npm run keyName即可批处理执行,提高开发效率。
    
    ### 8.使用 webpack 替换 入门-任务15中模块化使用的 requriejs
    [效果](https://kumabearplus.github.io/27/)
    [代码](https://github.com/kumabearplus/27)
    ### 9.gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
    > gulp是一种开源自动化构建工具,基于node.js构建,API易于学习,插件质量高
    
    [效果](https://kumabearplus.github.io/28/)
    [代码](https://github.com/kumabearplus/28)
    ### 10.开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)
    安装:
    

    npm install -g kuma-weather

    运行:
    

    weather city
    // city is optional

    
    

    相关文章

      网友评论

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

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