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

npm-npmscript-gulp-webpack

作者: billa_8f6b | 来源:发表于2017-07-02 15:04 被阅读0次

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

    //packageName是包名
    //install 可以用 i 代替
    //-g 表示全局安装
    npm install -g packageName
    

    2. package.json 有什么作用?

    命令行 npm init 可以初始化生成一个package.json

    package.json 是一个 json 格式的文件,用来记录当前的 npm 包的相关信息,如:

    • name:包的名字
    • version:版本号
    • description:描述
    • main:包的入口文件
    • script: 运行脚本命令的npm命令行缩写
    • author: 作者
    • license: 版权信息
    • dependencies:项目运行依赖,正式版本中也需要。
    • devDependencies:开发依赖,只有开发时候用的依赖包,正式版本中不需要。

    例子:

      {
        "name": "packageName", 
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
      },
        "author": "xxx",
        "license": "ISC",
        "dependencies": {},
        "devDependencies": {}
      }
    

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

    npm install --save app
    项目运行依赖:安装名为 app 的包,并在 package.json 中添加到 dependencies 项目运行依赖中去,发布以后别人会自动下载 app 依赖

    npm install --save-dev app
    开发依赖:安装名为 app 的包,并在 package.json 中添加到 devDependencies 开发依赖中去,这个 app 包依赖只有开发者自己使用,发布后别人用不到


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

    从文件所在目录下的 nodule_modules 开始,逐级向上查找,直到找到根目录,如果还找不到,就会报错。

    查找路径伪代码

    /e/饥人谷/senior/s5/webpack2-tutorial/node_modules
    /e/饥人谷/senior/s5/node_modules
    /e/饥人谷/senior/node_modules
    /e/饥人谷/node_modules
    /e/node_modules
    /node_modules 
    

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

    • npm2 把每个依赖的包放在自己的子目录里
      优点:目录结构清楚
      缺点:可能会有重复冗余的依赖包:如下面示意里 a1 ,重复下载了。

      |- a //包
      |- |- a1 //依赖
      |- |- a2 //依赖
      |
      |- b //包
      |- |- a1 //依赖
      |- |- b2 //依赖

    • npm3 把每个依赖的包放同级目录下,这样就可以减少包的重复下载

      |— a //包
      |- a1 //依赖
      |- a2 //依赖
      |— b //包
      |- b2 //依赖

    • yarn和npm比较
      npm安装不够快,不够稳定;npm安装时运行代码,存在安全问题。
      yarn使用yarn.lock(每当有模块被安装都一定会更新)来保证,不同机子安装程序时的版本一致。
      yarn安装速度比npm快。


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

    WebPack是模块打包工具:它可以分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其编译转换,给供浏览器使用。找到css, 图片, 字体等资源,进行压缩,混淆等操作后,输出为处理后的资源,并实现依赖加载等操作

    Grunt和Gulp的工作方式:

    image.png

    可以在一个配置文件中配置对某些文件进行类似编译,组合,压缩等任务的具体步骤,然后使用grunt或gulp自动替你完成这些任务

    Webpack的工作方式:

    image.png

    把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,通过各种loaders处理后,最后打包为一个浏览器可识别的JavaScript文件。

    对比:
    webpack 是以commonJS的形式来书写脚本,对 AMD/CMD 的支持也很全面,方便其它模块也兼容使用
    扩展性强,插件机制完善,能被模块化处理的资源多,例JS/CSS/IMG等
    开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。


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

    npm 允许在package.json文件里面,使用scripts字段定义脚本命令。
    上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node build.js。命令行下使用npm run命令,就可以执行这段脚本。

    例子:

    // package.json
    {
      // ...
      "scripts": {
        "upload": "git add .; git commit -m \"modify\"; git push"
      }
    }
    // commond window
    npm run upload
    

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

    预览
    代码


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

    Gulp是前端自动化工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

    预览
    代码

    相关文章

      网友评论

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

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