个人常用npm大全【笔记】

npm启动项目出错 报错：‘Error: error:0308010C:digital envelope routines::unsupported’
首先在命令行修改环境变量：$env:NODE_OPTIONS="--openssl-legacy-provider"
再启动项目：npm run serve  或 yarn start


设置成淘宝镜像（现在不要这么做）：
npm config set registry https://registry.npm.taobao.org/   //加速npm  其实很多不可用
还原：
npm config set registryhttps://registry.npmjs.org --global
下载 prettier 相关依赖
npm install prettier -D
//下载 ESLint 相关依赖：
pnpm install stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss -D
pnpm install stylelint-config-recess-order postcss postcss-html vue-eslint-parser -D
pnpm install sass sass-loader css-loader style-loader vue-loader postcss-loader -D
pnpm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue  -D
pnpm install vue-eslint-parser


//polyfill 是 globalthis 包
pnpm install globalthis
然后
import'globalthis/auto'
ts:
pnpm install @typescript-eslint/eslint-plugin @typescript-eslint/parser  -D

Git 流程规范配置
pnpm install husky -D
pnpm set-script prepare "husky install"
pnpm prepare
pnpm install lint-staged --D//git commit 信息校验工具，不符合则报错
pnpm install @commitlint/cli @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
// 安装 czg，如此一来可以快速使用 czg 命令进行启动。
pnpm install czg -D
//标准输出格式的 commitizen 适配器
pnpm install cz-git -D
//three
npm i --save-dev three

npm install three-orbitcontrols three-obj-mtl-loader three-obj-GLTFLoader stats-js --save-dev
npm i --save-dev @types/three


// 引入three.jsimport * as THREE from 'three';

// 引入扩展库OrbitControls.js

import{ OrbitControls} from'three/examples/jsm/controls/OrbitControls'; //gltfimport{ OBJLoader, //MTLLoader ,
} from'three-obj-mtl-loader'; //obj

// 引入扩展库GLTFLoader.js

1. import{ GLTFLoader} from'three/examples/jsm/loaders/GLTFLoader'; //gltf

// 创建3D场景对象Sceneconst scene = new THREE.Scene();


pnpm add **
pnpm install
pnpm update
pnpm run  dev







npm update常用命令使用

一、更新 npm-check检查更新 npm install -g npm-check npm-check 2.　　npm-upgrade更新 npm install -g npm-upgrade npm-upgrade 3.　　更新全局包： npm update <name> -g 4.　　更新生产环境依赖包： npm update <name> --save 5.　　更新开发环境依赖包： npm update <name> --save-dev针对vue2的老代码


babel-core升级为@babel/core ，eslint-loader升级为eslint-webpack-plugin， babel-eslint升级为@babel/eslint-parser

https://blog.csdn.net/Uookic/article/details/125680975



安装cnpm(Windows) 更换成淘宝的源npm config set registry https://registry.npm.taobao.org
– 配置后可通过下面方式来验证是否成功npm config get registry

先删除原有的所有代理
npm config rm proxynpm config rm https-proxy

npm 删除模块
【npm uninstall xxx】删除xxx模块；【npm uninstall -g xxx】删除全局模块xxx；

安装淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org或 npm i pnpm -g --registry=https://registry.npm.taobao.org

 (1)npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)cnpm -V(3)添加系统变量path的内容
因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

npm install -g yarnC:\Users\ThinkPad\AppData\Roaming\npm\yarn -> C:\Users\ThinkPad\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\ThinkPad\AppData\Roaming\npm\yarnpkg -> C:\Users\ThinkPad\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js

yarn --version添加 jquery ：
yarn add jqueryyarn add vue
yarn add @vue/cli -gyarn add webpack -g
或 yarn add webpack-cli --save-devyarn add vue-loader css-loader vue-template-compiler
yarn add vue-routeryarn remove vue-router
举例添加 bootstrap 和 zepto：yarn add bootstrap zepto
yarn init

11、发布包:yarn publish

 14、运行脚本:
yarn dev  //启动开发服务器//yarn  run
//yarn start用来执行在package.json中scripts属性下定义的脚本

vue 使用命令行创建项目:
npm install vue vue-loader vue-template-compiler    1:npm install vue-cli -g  [安装2.0版本]  不用了
        npm install vue-cli-service -g  [安装2.0，现在会失败] 不用了       npm uninstall  vue-cli -g  [卸载2.0版本]

       npm install @vue/cli -g   [安装3.0以上版本]
      npm install -g @vue/cli-service     或 npm install @vue/cli  @vue/cli-service -g

   2:npm install webpack -g     [全局安装]
           cnpm install --save-dev webpack    [安装到项目目录下]

    3. npm install webpack-cli -g  [全局安装]          cnpm install webpack-cli --save-dev [安装到项目目录下]

4.npm install --save-dev webpack-dev-server   [构建本地服务器]
  npm install axios -s
5:vue init webpack  myapp[ 项目名称 ]

6:cd myapp

7. npm i style-loader url-loader file-loader  stylus stylus-loader vue-loader css-loader    npm i webpack   webpack-dev-server   cross-env  html-webpack-plugin
    npm i postcss-loader autoprefixer babel-loader babel-core babel-preset-env babel-plugin-transform-vue-jsx    npm i  file-loader
     把 webpack 和它的插件安装到项目：   npm install webpack webpack-cli  webpack-serve  html-webpack-plugin  --save-dev
npm install node-sass@latest html-loader css-loader style-loader file-loader url-loader --save-dev  
     CSS单独打包插件     npm i extract-text-webpack-plugin
     或 npm i mini-css-extract-plugin

8:npm install [安装依赖]          或  npm init          [创建package.json文件]标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

9.输入命令
npm run build进行打包  //必须
npm run build:prod  --report


ID=screenfull
sidebar-container    navbar  tags-view-container

    let screenf = document.getElementById('screenfull');    let sidebarcontainer = document.getElementsByClassName('sidebar-container');
    let navbar = document.getElementsByClassName('navbar');    let tagsviewcontainer = document.getElementsByClassName('tags-view-container');
    screenf.addEventListener('click',function() {       sidebarcontainer.style.display = "none";
  navbar.style.display = "none";  tagsviewcontainer.style.display = "none";
   })


11、输入cnpm start    //必须
运行webpack-dev-server12:启动应用，地址为 localhost:8080
      npm run dev

npm stop 停止模块基础语法npm stop [-- <args>]
npm restart 重新启动模块 基础语法npm restart [-- <args>]

正式环境可以执行以下命令：npm run build



npm install vue-routernpm i cross-env    //运行环境



cnpm install vue-router<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>详情见：
https://www.runoob.com/vue2/vue-routing.html




浏览器兼容性问题，如有兼容性需求可自行使用 babel-polyfill。// 下载依赖
npm install --save babel-polyfill在入口文件中引入
import 'babel-polyfill'// 或者
require('babel-polyfill') //es6

在 webpack.config.js 中加入 babel-polyfill 到你的入口数组：

module.exports = {  entry: ['babel-polyfill', './app/js']
}


关于使用html-webpack-plugin
用最新版本的的 html-webpack-plugin你可能还会遇到如下的错误：throw new Error('Cyclic dependency' + nodeRep)
产生这个 bug 的原因是循环引用依赖，如果你没有这个问题可以忽略。目前解决方案可以使用 Alpha 版本
npm i --save-dev html-webpack-plugin@next




optimize-css-assets-webpack-plugin 这个插件，它不仅能帮你压缩 css 还能优化你的代码。//配置
optimization: {  minimizer: [new OptimizeCSSAssetsPlugin()];
}它不仅压缩了代码、删掉了代码中无用的注释、还去除了冗余的 css、优化了 css 的书写顺序，优化了你的代码 margin: 10px 20px 10px 20px; =>margin:10px 20px;。同时大大减小了你 css 的文件大小。更多优化的细节见文档。




安装 eslint， 用来检查语法报错，当我们书写 js 时，有错误的地方会出现提示。
npm install eslint eslint-config-enough babel-eslint eslint-loader --save-dev





引入Element-UI方式，推荐用插件方式引入
1.Vue create 项目名称2.Vue add element
3.




3.使用npm卸载插件：npm uninstall [-g] [–save-dev]PS：不要直接删除本地插件包
4.使用npm更新插件：npm update [-g] [–save-dev]5.更新全部插件：npm update [–save-dev]
6.查看npm帮助：npm help7.查看当前目录已安装插件：npm list



手机适配：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" /><meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script>                var bw = (document.documentElement.clientWidth/6.4)+"px";      
     var htmlTag = document.getElementsByTagName("html")[0];            htmlTag.style.fontSize=bw;
</script>


bable 安装:
(1):npm install –g babel-cli(2):npm install  -g  cnpm --registry=https://registry.npm.taobao.org   [国内域]
(3):npm install --save-dev babel-preset-es2015(4):type nul>.babelrc   [创建]         文件中写入{"presets":['es2015']}
(5):babel js/es6.js -o js/es5.js   转换(6):babel js/es6.js -o js/es5.js -w [随时更新]



gulp 安装:(1): npm install gulp -g          [全局安装]
(2): npm install gulp --save-dev   [安装依赖](3): npm install gulp-sass --save-dev  [sass插件]
(4): npm install gulp-connect --save-dev  [插件搭建本地服务](5): npm install gulp-concat --save-dev  [合并插件]
(6): npm install gulp-uglify --save-dev  [合并js文件进行压缩](7): npm install gulp-rename --save-dev   [保留前后压缩两个文件]
(8): npm install gulp-sass --save-dev]      npm install gulp-clean-css --save-dev   [压缩css](9): npm install gulp-imagemin --save-dev   [对图片进行压缩]
(10):npm install gulp-sourcemaps --save-dev(11):npm install babel-cli --save-dev  
      npm install babel-preset-es2015 --save-dev      npm install  gulp-babel  --save-dev      [es6转换es5]

定义:
  const gulp = require('gulp');  const sass = require('gulp-sass');
  const connect = require('gulp-connect');  const concat = require('gulp-concat');
  const uglify = require('gulp-uglify');  const rename = require('gulp-rename');
  const cleanCss = require('gulp-clean-css');  const imagemin = require('gulp-imagemin');
  const babel = require('gulp-babel');

    gulp.task("server",function(){    connect.server({
        root:"dist",        livereload:true
    })    });

git 分支语句命令:
  $ ssh-keygen -t rsa -C "youremail@example.com"   [创建密钥]  $ git config --global user.name "Your Name"
  $ git config --global user.email "email@example.com"  [git 是分布式管理系统 所以需要输入名字和email]  $ mkdir learngit    [创建项目]
  $ cd learngit       [文件指向]  $ pwd              [显示当前目录]
  $ git init          [把目录变成可以管理的仓库]     如果使用Windows系统，为了避免遇到各种莫名其妙的问题，请确保目录名（包括父目录）不包含中文
  $ git add xx        [把文件添加到仓库]  $ git commit -m "xx"    [把文件提交到仓库]          
  $ git reset --hard HEAD  [回退(上一个版本就是HEAD^，上上一个版本就是HEAD^^)]   $ git reset --hard commit id   []
  $ git reflog   [记录了你的每一次命令]  $ git checkout -- xx  [让文件回到你最后提交的状态]
  $ git reset heard HEAD xx    [把暂存区的修改撤销掉]  $ git rm xx  [删除]
  $ git status   [仓库的当前状态]  $ git diff xx  [查看改动 (只能在未提交之前使用)]
  $ git log      [显示从最近到最远的提交  (提交历史)]   如果眼花缭乱，可以试试加上--pretty=oneline参数  git branch  [查看分支]
  git branch <name>  [创建分支]  git checkout <name>  [切换分支]
  git checkout -b <name> [创建+切换分支]  git merge <name>   [合并某分支到当前分支]
  git branch -d <name>  [删除分支]  git log --graph      [查看分支合并图]
  git stash        [可以把当前工作现场管理起来]  git stash pop    [恢复工作现场]



npm i webpack-dev-middleware@3.7.2   webpack-dev-server@3.11.0