zoukankan      html  css  js  c++  java
  • webpack前置知识2(JavaScript项目初始化)

    所有的JavaScript项目都是在终端输入npm init -y进行项目初始化,如果要自定义项目规则,去掉 -y 参数。

    vscode终端快捷键ctrl+`
    vscode终端快捷键ctrl+`

    初始化
    初始化

    运行上述命令后,项目内会新建一个package.json文件,打开该文件如下:

    package.json
    package.json

    package.json文件内部就是一个JSON对象,该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称,version是版本

    package.json文件解释

    name: 项目名称
    version: 项目版本号
    description: 项目描述
    main:入口文件,引用某开发依赖包,这个字段的默认值是模块根目录下面的index.js,不然工程中无法用import导入依赖包;不使用main属性的话我们可能需要这样写引用:require("some-module/dist/app.js")
    author,作者,这里要你预先配置自己的git。
    格式设置如下:

    { “name” : “abc” 
    , “email” : “abc@123.com” //问题反馈的Url或email配置
    , “url” : “http://barnyrubble.tumblr.com/” //问题反馈的Url或email配置
    }
    

    scripts:scripts指定了运行脚本命令的npm命令行缩写,比如start指定了运行npm run start时,所要执行的命令。

    dependencies:指定了项目运行所依赖的模块,整个项目一直都需要的模块
    devDependencies指定项目开发所需要的模块,上线发布后就没用的模块。

    从上面的例子不难发现,我们每进行一次打包都要输入一段冗长的命令,这样做不仅耗时而且容易出错。为了使命令行指令更加简洁,我们可以在package.json中添加一个脚本命令。
    npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

    {
      // ...
      "scripts": {
        "build": "node build.js"
      }
    }
    

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

    除去以上的这些命令外,经常还能见到一些npm start、npm deploy、 npm build等等之类的命令,这些一般都是在package.json 中自定义的一些启动、重启、停止服务之类的命令。可以在package.json文件的scripts字段里自定义。例如:

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack",
        "start": "webpack-dev-server main.js,
        "deploy": "set NODE_ENV=production"
      }
    

    关于package.json的详细文档,有兴趣的同学可以参考《package.json中文文档》;

    扩展内容(下载包缓慢时使用)

    在终端,安装nrm工具,使用 nrm use进行镜像地址切换,然后使用npm 进行cnpm包的安装,接着即可使用cnpm进行包的管理。

    nrm和cnpm的安装使用

    作用: 提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址;
    镜像:因为很多node包都是托管在外国服务器,但是由于网络原因,国内经常访问不到。国内的淘宝团队对该服务器进行了映射,即拷贝了一份放在国内,供开发者使用,淘宝团队每10分钟对所有镜像进行更新,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样;

    • 运行npm i nrm -g 全局安装nrm包;

      npm i nrm-g
      npm i nrm-g

    • 使用nrm use npmnrm use taobao切换不同的镜像源地址;

    nrm use taobao 使用淘宝作为镜像地址
    nrm use taobao 使用淘宝作为镜像地址

    • 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址;

    nrm ls 列表输出镜像地址
    nrm ls 列表输出镜像地址

    
    npm i nrm -g //安装nrm工具
    
    nrm use taobao //切换镜像地址
    
    npm i cnpm -g //安装包管理工具
    
    cnmp i package //安装包
    
  • 相关阅读:
    遍历文件夹与文件
    HMM&CRF
    获取js代码运行的时间
    小程序canvas绘制纯色圆角区域 setdata数组某一项
    layui type:2 iframe子页面向父页面传值
    layui 时间插件,change&&done,按照官网写法无效,解决方式!
    doT.js模板用法
    css画叉叉(一般用于关闭按钮)
    js复制文本到剪贴板
    node之module与fs文件系统
  • 原文地址:https://www.cnblogs.com/singledogpro/p/12015316.html
Copyright © 2011-2022 走看看