前端构建（NPM/GIT/WebStorm/cnpm/yarn/本地调试/webpack loader编写/Webpack插件）

Nodejs

样例：https://github.com/saoraozhe3hao/nodeDemo

升级nodejs：参考 https://github.com/nodesource/distributions

规范：commonJS

框架：express

模板引擎：EJS、jade

推送：socket.io

NPM （Node Package Manager）

安装 npm-cli

安装nodejs时，会默认装上npm，即生成一个命令脚本npm.cmd，放在nodejs安装根目录中（系统环境变量中有该路径），该脚本中的语句就是用nodejs去执行一个js文件npm-cli.js

Linux CentOS 安装

curl -sL https://rpm.nodesource.com/setup_16.x | bash -
yum install nodejs
yum install npm

npm 配置

npm config list       查看npm配置，包括代理proxy，全局安装目录prefix，配置文件位于 ~/.npmrc

npm config set registry "http://registry.npm.taobao.org"     //仓库设置

npm config set proxy ***;  npm config set http-proxy ***  //代理设置

npm config set strict-ssl false   // 关闭https

npm 使用

npm init               在当前目录创建一个package.json，包括名称、版本、作者这些信息等

npm install         安装package.json配置的依赖包，在当前目录创建一个node_module文件夹，将下载的内容放在该目录下

npm install  --omit optional  安装时忽略掉 optionalDependencies

npm install <name>@<version>     安装指定的依赖包 和 版本

npm install <name> --save 安装的同时写入package.json中的dependencies

npm install <name> --save-dev 安装的同时写入package.json中的devDependencies

npm install <name> -g  将包安装到prefix目录，npm config list 可以看到这个目录

包版本

^1.2.1 表示 npm update 时更新版本小于 2.0.0

~1.5.1 表示 npm update 时更新版本小于 1.6.0

1.x  表示 npm update 时更新版本小于 2.0.0

* 表示 npm update 时更新到最新版本

GIT

工作目录 ----add--->  暂存区 ---commit--->  本地仓库 ----push--->  远程仓库

clone

克隆：git clone {url}

branch

新建分支：git branch {new_branch_name}

查看本地分支：git branch

查看远程分支：git branch -a
删除远程分支：git push origin --delete {branch_name}
删除本地分支：git branch --delete {branch_name}

checkout

切换到本地或远程已有分支： git checkout {branch_name}

还原本地修改：git checkout -- {file_name}

pull

拉取当前分支：git pull

拉取指定分支并合并：git pull origin {branch_name}

diff

查看差异：git diff

add

索引修改、新增文件：git add

索引修改、删除文件：git add -u

索引修改、删除、新增文件：git add -A

commit

提交当前分支：git commit -m "{message}"

push

上传一个远程不存在的分支：git push --set-upstream orgion {branch_name}

上传当前分支：git push

回退

撤销add：git reset HEAD

本地回退到某次提交并同步到远程：git reset --hard {commit_id}; git push -f

tortoisegit:

commit 后，图标就变绿。先commit再push。

只能clone主干。本地创建分支时，远程还没有，直到在分支中做push。本地删除分支后，要把远程的分支也删掉，以后才能再创同名的分支，否则会造成不一致。
tortoiseGit完整流程：
初始化：克隆主干-》在本地创建分支-》切换到分支-》commit push 分支 。如果远程已存在同名分支，要先删除
更新：pull 主干到 本地分支，如果失败，根据提示进行操作
上传：commit到暂存，push到远程分支，再申请合并到主干
.gitignore，忽略文件
免密码：安装好tortoiseGit后，用tortoiseGit带的puttyGen 工具生成密钥对，复制公钥到git网站上，用tortoiseGit带的Pageant导入私钥

          另一种方法：右键 -》 Git Gui -> Help -> show SSH Key Generate Key

子模块

一个Git项目包含子项目，那么他的主目录下有.gitmodules文件，用来配置包含哪些子项目
       父项目 只关联 子项目的 快照，而不是关联子项目的分支。
       1、子项目初始化，即第一次提交子项目快照到父项目
            通过 clone  Recursive 或者 submodule update 拉取子项目，此时父项目关联子项目快照，因此拉的子项目的master分支。
        2、子项目快照 合并 子项目分支，想让父项目使用最新的子项目分支 时操作。
              子项目目录下 pull  合并分支到快照， commit submodule  提交新快照 ， 父项目目录下 commit  提交新的关联，push
        3、修改子项目快照，不影响分支。
              在父项目下修改子项目代码后，commit submodule  提交新快照 ， 父项目目录下 commit  提交新的关联，push

WebStorm

Prettier格式化

npm install -g prettier

Setting->Prettier->Prettier project 选Prettier安装目录

Setting->Keymap->Prettier 设置格式化快捷键

配置文件 .prettierrc.cjs 放到项目根目录下

module.exports = {
  tabWidth: 4, // tab空格长度
  semi: true, // 语句末逗号
  singleQuote: true, // 单引号
  bracketSameLine: true, // 尖括号是否放置在行末
  arrowParens: "always", // 箭头函数参数括号
  vueIndentScriptAndStyle: false, // vue 模板标签缩进
  printWidth: 180 // 换行文本阈值
};

cnpm 、yarn

cnpm

安装：npm install -g cnpm

淘宝镜像：cnpm 和 npm 的命令一样，只不过仓库用的是npm仓库在国内的镜像

npm设置淘宝镜像：npm config set registry https://registry.npm.taobao.org 

yarn

安装： npm install -g yarn --registry=https://registry.npm.taobao.org

仓库设置：yarn config set registry https://registry.npm.taobao.org

Linux CentOS安装

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
rpm --import https://dl.yarnpkg.com/rpm/pubkey.gpg
yum install yarn

并行安装：npm安装依赖时是一个一个安装，yarn能并行安装，速度更快

npm命令对应的yarn命令

npm init ------   yarn init
npm run     ------   yarn run 
npm install ** ------   yarn install  **
npm install ** —save ----- yarn add **
npm uninstall ** —save ------- yarn remove **
npm install ** —save-dev  ------ yarn add ** —dev
npm update ** —save  -------  yarn upgrade **
npm install ** --global --------  yarn global add **

离线安装
本机安装过一个包，那么会被缓存，下次在其他地方安装时，可以使用离线模式
yarn add ** -offline

依赖版本一致性
yarn add 生成的 yarn.lock 会指定各个依赖的确定版本，使得在不同机子上安装依赖时，版本保持一致

本地调试

http-server

全局安装：npm install -g http-server

启动：http-server -p 端口

浏览器

Chrome设置

允许访问本地文件、允许跨域请求：--allow-file-access-from-file --enable-file-cookies --disable-web-security  

webpack loader编写

目标：打不同环境的包，对文件进行特定处理

案例：打生成环境包时，删除掉mock相关代码

成果：profile-loader - npm

1、webpack配置

  resolveLoader:{
    // 去哪些目录下寻找 Loader，有先后顺序
    modules: ['node_modules','./build'],
  }

2、webpack配置

      {
        test: /\.mpx$/,
        use: {
          loader: "profile-loader", // 根据不同环境做不同处理
          options: {
            profile: process.argv.includes('-p') ? "prod" : "dev"
          }
        }
      },

3、profile-loader.js

const loaderUtils = require('loader-utils');

let includeRegExp = new RegExp("\\/\\*include(.*)start\\*\\/[\\s\\S]*\\/\\*include end\\*\\/");
let excludeRegExp = new RegExp("\\/\\*exclude(.*)start\\*\\/[\\s\\S]*\\/\\*exclude end\\*\\/");

module.exports = function (source, option) {
    const options = loaderUtils.getOptions(this);
    let profile = options.profile || "";

    let matchs = source.match(includeRegExp, '');
    if (matchs && !matchs[1].includes(' ' + profile + ' ')) {  // include 里不包含当前profile，则将其删除
        source = source.replace(matchs[0], '');
    }

    matchs = source.match(excludeRegExp, '');
    if (matchs && matchs[1].includes(' ' + profile + ' ')) {  // exclude 里包含当前profile，则将其删除
        source = source.replace(matchs[0], '');
    }
    return source;
};

4、给代码加特定注释

  /*include dev start*/
  import './mock'
  /*include end*/
  /*exclude prod start*/
  import './mock'
  /*exclude end*/

npm module上传

1、到npm 网站上注册账号 npm

2、初始化项目 npm init，将项目提交到github，增加 .gitignore、LICENSE、README.md

3、本地登录  npm login

4、提交项目 npm publish

Webpack插件

copy-webpack-plugin

没有被静态引用的资源文件，不会被打到包里，可以用这个插件指定额外需要打到包里的文件，会进行 terser[minify/uglify]

放在 public 目录下，也会自动打到包里，不会terser[minify/uglify]