npm

npm的基本使用

现代前端项目结构

现在开发一个新前端的项目，肯定会通过npm来管理项目

管理项目版本、描述、作者、版本号、官网、用到第三方包。。。

npm 初始化项目

建立好项目的描述信息。。。

在桌面上新建一个文件夹项目名称一定要用英文尽可能特殊一点 itweb001
进入到这个文件夹下，打开终端输入以下命令进行初始化
```
npm init -y 
```
你会发现你的目录下，多了一个项目描述文件 package.json
该文件下，就会有看见的项目描述信息

修改npm镜像源地址

下载第三方包的时候默认是从国外 npm 官网来下载

国外网站访问特慢失联

国内大厂

阿里和腾讯自己也建立了一个网址阿里npm 腾讯npm

以上两个网址每15分钟去国外的npm的网站来拷贝一次上面所有的包到自己的网站

国内程序员修改了一下 npm 默认的下载地址（镜像源）改为国内阿里。。

如何修改

npm config set registry http://registry.npm.taobao.org/

使用npm 来下载第三方包

npm install axios 
npm i axios

开始下载第三方的包 npm i axios

image-20220602091041009.png

目录文件会发生变化
1. package.json 多了一个配置 dependencies 表示项目用了哪些第三方的包
image-20220602091213395.png
1. 多了一个文件夹 node_modules 表示存放第三放包，手动的去改里面东西。
2. package-lock.json 精确锁定下载包的版本信息

使用npm 来同时下载多个包

使用空格做间隔

npm i axios jquery bootstrap

使用npm 下载指定版本的包！！

npm i axios@0.26.1

使用 npm 来卸载第三方包

npm un axios

移除掉 package.json dependencies 中 axios 信息
帮你删除掉 node_modules 中 axios 包文件

npm + git

场景模拟同事直接分享项目的场景

A同事
1. 使用npm 来初始化项目
2. 使用npm 来按照 30个依赖
3. git 把项目推送到远程仓库上了
  1. 一定会做一件事添加一个忽略清单 .gitignore 里面写忽略信息
```
node_modules/
```
  2. 为什么不上传 node_modules
    1. 太多小文件了，在传输的时候耗时特别严重。
B同事
1. 拿到同事A上传好代码的 git地址
2. 同事B 克隆代码（有node_modules）
3. 同事B 重新下载一遍所有的包找到对应的版本（不会手动去挨个敲一遍下下载）
4. 同事B 只要做一个命令 npm i
  1. npm 自动的根据 package.json 中的依赖进行下载

快捷运行命令

以前这么敲 node index.js

vue-cli-service build --mode staging

npm建议，你可以把要敲的命令都封装在 package.json 文件中字段 scripts

  "scripts": {
    "a":"nodemon app.js"
  },

npm run a

全局包与本地包的区别

全局安装的包一般都是充当工具来使用 nodemon
```
npm i -g nodemon 
```
```
nodemon app.js 
```
本地安装的包，一般都是js库插件来帮助当前项目使用
```
npm i axios 
```

全局的包

nodemon 自动重启nodejs 代码

nrm 管理镜像地址

npm i  -g nrm 

nrm test  测试每一个镜像地址的网速
 
nrm use taobao 切换到淘宝的镜像地址

express

第三方的包

快速开发 node后端代码的框架

接口服务器的功能

/* 
线上的接口服务器  图书列表 
1 查询数据
  1 get 
  2 /api/getbooks
  3 不带参数 
  4 带参数 
2 增加数据
  1 post
  2 /api/addbook
  3 带参数 
3 删除数据
  1 delete
  2 /api/delbook
  3 参数  id 
4 修改数据
  1 put
  2 /api/updatebook
  3 参数 。。。 
 */

找一个新的文件夹 express01
在里面 npm 初始化
```
npm init -y 
```
做git 初始化
```
git init 
```
添加git 忽略清单 .gitignore
```
node_modules/
```
npm 下载第三方包
```
npm i express 
```
修改 package.json scripts 字段
```
"dev" :"nodemon app.js"
```
新建一个js文件 app.js
在里面 BABALA。。。

体验express的开发魅力

// 1 引入  express
const express = require("express");

const fs = require("fs");

// 引入 解决跨域 第三方包
const cors = require("cors");

// 2 通过它来创建一个服务对象
const app = express();


// express 允许获取post请求的参数 固定搭配
app.use(express.urlencoded());// 写死代码

// 使用跨域的包
app.use(cors());


// 查询
app.get("/api/getbooks",function (req,res) {

  const booksJson = fs.readFileSync("./data/books.json","utf8");
  
  // res.end  原生node的写法
  res.send(booksJson);// express写法
})
// 增加
app.post("/api/addbook", function (req, res) {
  // 通过 req.body 获取到 post请求的参数
  console.log(req.body);
  res.send("增加"); 
})
// 删除
app.delete("/api/delbook",function (req,res) {
  // 获取 url上的参数
  const {id} = req.query;
  console.log(id);
  res.send("删除"); 
})
// 修改
app.put("/api/updatebook",function (req,res) {
  res.send("修改"); 
})
// 3 开启端口
app.listen(8888, () => {
  console.log("8888开启成功");
})

问题

禁止运行脚本

image-20220602102237527.png

以管理员的身份来运行一个终端

image-20220602102354426.png

把命令复制进去
```
set-executionpolicy remotesigned
```
敲大写 A

image-20220602102443462.png

关闭你vscode，重新打开再去运行 nodemon app.js

node重新认知

认为 node就是后端语言，所以node的作用就是做后端服务器 不够全面偏面

node对于前端最重要的作用是提供了前端项目架构的基础能力

1 解析 less 、 sass css预处理器文件
2 高版本的js 做低版本的兼容处理 
 箭头函数  ()=>{}   function(){}
3 代码开发完毕了 压缩 混淆代码    
4 项目 迭代 升级 
  静态资源升级了 如果 你文件名不发生一些改变 有些浏览器会缓存下来   index.js 
  每一次升级版本 的 静态资源文件 如果安生过改变 自动给文件添加一些 后缀 - 让浏览器认为 是新的文件，加载新文件 
5 前端基本的代码 后缀名 html、css 、js
  vue项目 文件后缀名  *.vue =>     html、css 、js
  react  文件后缀名  *.jsx  =>    html、css 、js

webpack 前端项目打包工具

vue react 底层也是用了 webpack

webpack

给我们旧时代的前端开发流程带来很大改变

你难以去接受

https://webpack.docschina.org/

一切都是资源，一切都可以直接在js文件中来引入和使用

console.log(123);
// 引入样式文件
import "index.css";
// 引入 less文件
import "index.less";
// 引入 图片文件
import imgSrc from "真正的图片文件地址";

// 使用图片
document.querySeletor("img").src= imgSrc;

如何学习webpack

webpack作用搭建项目结构！！ 前端新人不会做搭建项目的工作
以前写业务代码手写代码！！！但是webpack配置代码 不要手写！！找目录文档按需复制按需微调！！
面试中爱问知识我们可以知道可以答上来！

今天下午要安装的包

npm i @babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin less less-loader style-loader webpack webpack-cli webpack-dev-server jquery

基本的使用

1 新建文件夹英文 webpackdemo01

2 进入到项目中来初始化它

git 初始化
npm 初始化

3 安装 webpack的依赖

webpack 核心包来解析资源（css js 图片）

webpack-cli 让我们在命令行中输入命令有效 webpack

npm install webpack webpack-cli

4 在我们的package.json 文件中添加以下记录

"scripts": {
    "build": "webpack"
}

5 新建一个入口文件

src/index.js

console.log("呵呵")

6 开始打包

npm run build

7 打包成功

image-20220602152214050.png

修改入口和出口的文件

在根目录下新建js文件 webpack.config.js

填写固定的配置

const path = require("path");
module.exports = {
  // 指定入口文件
  entry: './src/index.js',
  // 指定出口
  output: {
    // 文件名称
    filename: 'main.js',
    // 绝对路径 生成到哪里
    path: path.resolve(__dirname, 'dist'),
  },
};

隔行变色的案例

安装 jquery npm i jquery

修改 src/index.js

// 1 新语法来导入 jquery 存在一个变量 $
import $ from 'jquery'

// 2 使用jq的语法 实现 选择 li标签 奇数和偶数 不同颜色
$('#app li:nth-child(odd)').css('color', 'red')
$('#app li:nth-child(even)').css('color', 'green')

重新运行命令 npm run build 成功之后，会在 dist 目录下多了一个 main.js文件

在 dist 目录下新建了一个index.html ，里面写 #app ul li，引入打包后的 main.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>index.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

运行静态页面，发现实现以下

image-20220602163550202.png

自动生成html和引入js文件

先手动删除 dist 文件夹
下载插件 npm install html-webpack-plugin

在 public/index.html 填写我们的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>index.html</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
  </body>
</html>

修改 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}

重新打包 npm run build

image-20220602170208902.png

打开 dist/index.html 一样隔行变色效果

处理css样式文件

下载依赖 npm install style-loader css-loader
新建好样式文件 src/css/index.css
```
li{
  background-color: aqua;
}
```

修改 src/index.js 来引入样式文件

// 3 引入 样式文件
import "./css/index.css";  // 以后常用的方式

修改 webpack.config.js

module.exports = {
    // ...其他代码
    module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

重新运行打包命令 npm run build
dist/index.html 运行起来

image-20220602172100383.png

处理less样式文件

安装依赖 npm install less less-loader

新建less样式文件 src/less/index.less

ul {
  li {
    font-size: 30px;
  }
}

修改 src/index.js 来引入 less样式

import "./less/index.less";  // 以后常用的方式

修改 webpack.config.js

module: {
  rules: [ // loader的规则
    // ...省略其他
    {
     test: /\.less$/,
     // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

再次执行打包命令 npm run build 即可

处理图片资源

src/images/1.jpg 放一张图片

src/index.js

import imgSrc from "./images/1.jpg";

$("body").css("background", `url(${imgSrc})`);

修改配置文件 webpack.config.js rules 里面

{
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
}

处理字体图标

在 src/fonts/ 存放字体图标文件和样式文件

image-20220602181424405.png

在 src/index.js 来引入和使用它

// 6 引入字体图标样式
import "./fonts/iconfont.css";

// 使用字体图标
$("li").addClass("iconfont icon-jiantou9");

执行打包 npm run build

来处理高级版本的js代码

安装依赖

npm install babel-loader @babel/core @babel/preset-env

修改 src/index.js

// 箭头函数
const func = () => { };
console.log(func);

修改 webpack.config.js

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
  ]
}

重新来运行打包 npm run build
运行结果对比

image-20220602182821762.png

webpack实现开发阶段支持

运行一个命令 npm run dev
webpack 帮我们自动打开一个浏览器页面显示出来正在开发 index.html
webpack 自动监听静态资源 -> 发生了改变自动打包-自动刷新页面

使用了这个插件之后，不会帮我们生成真正的物理文件，而是把静态页面和样式资源都存放在了电脑的内存中！！！所以编写代码刷新看效果速度快

安装插件 npm install webpack-dev-server

修改 package.json scripts

"scripts": {
 "build": "webpack",
 "dev": "webpack serve"
}

修改 webpack.config.js

module.exports = {
    // ...其他配置
  mode:"development",// 让webpack知道当前是开发阶段
  devServer: {
    open: true, // 自动打开浏览器
    port: 3000, // 端口号
  },
}

运行命令 npm run dev

补充

path 和路径

// 引入 路径相关 内置模块
const path = require("path");
// __dirname 是node中的全局变量 可以自动返回 当前文件的绝对路径

// path.resolve  自动把里面的参数  拼接成 路径的格式
console.log(path.resolve(__dirname,"dist","a","b"));// D:\传智播客\广州前端77期\front-end-77\dist\a\b

引入模块和导出模块的方式（2种）

导出和导入-旧一点

module.exports= {}  // 导出

const a = require("./a");// 导入

导出和导入 - 新一点
```
// 导出

import a  from "./a";
```

npm的基本使用

现代前端项目结构

npm 初始化项目

修改npm镜像源地址

使用npm 来下载第三方包

使用npm 来同时下载多个包

使用npm 下载指定版本的包！！

使用 npm 来卸载第三方包

npm + git

快捷运行命令

全局包与本地包的区别

全局的包

express

体验express的开发魅力

问题

禁止运行脚本

node重新认知

webpack

如何学习webpack

今天下午要安装的包

基本的使用

1 新建文件夹 英文 webpackdemo01

2 进入到项目中 来初始化它

3 安装 webpack的依赖

4 在我们的package.json 文件中添加以下记录

5 新建一个入口文件

6 开始打包

7 打包成功

修改入口和出口的文件

隔行变色的案例

自动生成html和引入js文件

处理css样式文件

处理less样式文件

处理图片资源

处理字体图标

来处理高级版本的js代码

webpack实现开发阶段支持

补充

path 和路径

引入模块和导出模块的方式（2种）

推荐阅读更多精彩内容

1 新建文件夹英文 webpackdemo01

2 进入到项目中来初始化它