npm包管理工具

1,认识npm

npm即node的包管理器

是Node.js默人的、以JavaScript编写的软件包管理系统

npm已经是前端工程师的标配

在npm上我们可以很方便的下载我们所需要的的包, 如jquery,vue等

​ 官网 npm官方网站

2,下载

  • 先下载node.js(因为node中自带有npm,所以无需多下载npm)

node官网

  • 然后使用node.js的命令工具查看node版本
$ node -v
# 查看node版本
  • 查看自己的npm版本
$ node npm -v
#查看npm工具的版本
  • 更新npm
$ npm i npm

3,切换npm包下载的地址

因为npm官方网址需要翻墙才能下载包,而且下载速度会有写迟缓,所以这里我们更推荐使用淘宝的镜像npm

  • 使用nrm工具切换淘宝库

    $ npx nrm use taobao
    
  • 使用nrm工具切换为官方库

    $ npx nrm use npm
    

4,常用命令

  • 查看全局安装了那些包
$ npm list -g
  • 查看版本
$ npm jquery -v
  • 指定下载包的版本(在包名后添加@符号后跟版本号)
$ npm i jquery@1.1.2

5,npm中的包描述文件

  • 初始化包描述文件package.json
$ npm init
# 初始化包描述文件
> This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
# 包的名称(默认为文件名)
package name: ddd
# 版本号(默认为1.0.0)
version: (1.0.0)    
# 包的描述
description: 这是一个··········
# 主文件是什么(主执行文件)默认是index.js
entry point: (index.js)app.js

test command:
# 包的存放类型
git repository: git
# 被搜索的关键字
keywords:vue ajax
# 作者
author:miu
# 规范类型(默认为ISO)
license: (ISC)MIT

About to write to D:\HTML\前端案例\Vue\ddd\package.json:

{
  "name": "ddd",
  "version": "1.0.0",
  "description": "45456",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "keywords": [
    "vue",
    "ajax"
  ],
  "author": "miu",
  "license": "MIT"
}

# 是否完成初始化
Is this OK? (yes) 

> yes
  • 完成操作后会在文件内生成一个包描述文件package-lock.json
{
  "name": "ddd",
  "version": "1.0.1",
  "description": "miaoshuwenjian",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git"
  },
  "keywords": [
    "vue",
    "ajax"
  ],
  "author": "miu",
  "license": "MIT"
    "dependencies": {
    "vue": {
      "version": "2.6.12",
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
    }
  }
}

“dependencies”:可以看见文件依赖的包

“scripts”: 可以调用执行代码

  • 跳过描述文件(npm init -y)可以快速描述初始化文件
D:\HTML\前端案例\Vue\ddd>npm init -y
Wrote to D:\HTML\前端案例\Vue\ddd\package.json:

{
  "name": "ddd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • 当文件中的某一个模块丢失时可以使用npm install将包描述文件中的依赖包重新下载回来(包描述文件不能删除)

webpack5

1,认识

webpack是一个模块打包器(构建工具),他的主要目标是将js文件打包到一起,打包后的文件用于在浏览器中使用,但他能够胜任转换(transform)、打包(bundel)或包裹(package)任何资源。

  • 树结构

    在一个入口文件中引入所有资源,形成依赖关系图

  • 模块

    模块可以是引入的第三方包(node),也可以是系统的内置模块,还能是用户自定义的某种文件,对于webpack来说(img/js/css/html/·····)

  • chunk

    打包过程中被操作的模块文件叫做chunk,例如一个异步加载的模块就是一个chunk

  • bundel

    bundel是最后打包后的文件,最终文件可以和chunk长得一模一样但是大部分情况下它是chunk的集合

为了优化最后生产出的bundel数量可能不等于chunk的数量,因为有可能多个chunk被组合到了一个bundel

在这里插入图片描述

2,webpack安装与体验

安装webpack5之前需要安装脚手架(注意全局安装)

即webpack-cli

  • 安装命令(全局安装)

    $ npm i -g webpack webpack-cli -D
    

    -D是开发环境的安装

  • 本地安装

    $ npm i webpack webpack-cli -D
    

3,打包

  • 开发模式(会有一些注释,变量名没有简化)
$ webpack 文件当前目录 -o 文件打包目录 --mode=development
  • 生产模式(没有注释,变量名大多为单字母)
$ webpack 文件当前目录 -o 文件打包目录 --mode=production

注意目录名都是相对路径

4,webpack五个核心理念

  • entry入口

    指示webpack文件以哪个文件为入口起点开始打包,分析构建内部依赖图

  • output输出

    指示webpack打包后的资源bundles输出到哪里,以及如何命名

  • loader

    让webpack能够去处理那些非javascript资源css、img等,将它们处理成webpack能够识别的资源,可以理解为一个编译过程(webpack自身只能js和json文件)

  • plugins插件

    可用于执行范围更广的任务,插件的范围包括,从打包优化到压缩,一直到重新定义环境中的变量等

  • mode模式

    mode指示webpack的使用相应模式的配置

    开发模式:(development):配置比较简单,能让代码调用本地的环境

    生产模式:(production):代码需要不断优化达到性能最好,能让代码优化上线运行时的环境

!每次打包时因为指令的长度而导致过于繁琐的操作,这时我们可以初始化一个webpack.config.js文件来统一管理打包

// 在项目中新建一个webpack.config.js文件

//导入node中的path模块
const path = require('path');
//创建当前文件目录----resolve()方法用于拼接路径
//__dirname即项目文件的目录
let url = path.resolve(__dirname+'./src/index.js');
//使用exports暴露需要的方法
module.exports={
    //1,entry入口
    entry:url,
    
    //output输出---因为修改的属性较多,所依使用对象形式更改
    output:{
    filename:'bulid.js',//默认情况下创建的文件名
    path:path.resolve(__dirname+'bulid');//bulid是默认输出的文件夹名称
}//loader可以处理非js文件资源
   module:{········}//plugins插件
   //补充一些功能插件
    
   //mode模式(可以更改默认打包模式)
   mode:development;
}

完成后输入webpack可以找设定好的条件打包

5,打包的入口方式

根据入口函数的数量有3种打包的方式

  • 单个入口文件的打包方式

    module.exports = {
        entry:'./xx/xx.js',
    }
    //输出只有一个bundle
    
  • 两个或两个以上的入口文件

    1数组的方式

    module.exports = {
        entry:['路径一','路径二']}
    //最后会根据设置的打印路径生成一个bundle
    

    2对象的方式

    module.exports = {
        entry:{
            //此时文件名称为one.js,two.js
            //此时chunk名为one.js,two.js
            one:'路径一',
            two:'路径二'
        },
        output:{
        //文件名称one.js,two.js
        filename:'[name].js',
        path:path.resolve(__dirname+'bulid');
    }
    
    }
    //最后会根据设置的打印路径生成两个bundle,它们都在一个文件夹下
    
  • 特殊打包用法-----混合用法

    module.exports={
        entry:{
               one:['路径一','路径二'],
               two:'路径三'
    }
    //这种打包方式生成两个bundle
    }
    

6,打包html资源

使用插件(plugins)对html资源进行处理(html-webpack-plugins)

使用步骤:

  • 下载

    npm i html-webpack-plugins -D
    
  • 引入

    const hwp = require('html-webpack-plugins');
    
  • 使用

    plugins:[
        //功能:默认会创建一个空的html文件,自动引入打包输出的所有资源,hwp中有参,会根据参数来打包html文件
        new hwp({
        //复制'./src/index.html'文件,并自动引入打包输出的所有资源
        template:'./src/index.html',
        //可以设置打包后四位资源名
        filename:'demo.html',
        
            //压缩html代码
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
            
            //默认---minify:false
            //设置压缩---minify:true
        }),
    ]
    

7,打包多个html文件

​ 新建如图所示的文件

在这里插入图片描述

要求:将每个js文件打包,将每个html文件打包,且首页html要和公共js、首页js打包到一起,购物车html要和公共js、购物车js打包到一起,

//引入path模块
const path = require('path');
// 引入下载的html-webpack-plugin模块
const hwp = require('html-webpack-plugin');

module.exports = {
    // 将需要打包的js分需求的打包
    entry: {
        // 首页
        index: ['./public/js/index.js'],
        // 购物车
        cart: ['./public/js/cart.js'],
        // 公共
        common: ['./public/js/common.js']
    },

    output: {
        // 打包后的js文件名称
        filename: '[name].js',
        // 打包的文件路径
        path: path.resolve(__dirname, 'bundle')
    },

    // 打包html插件
    plugins: [
        // 有多少个需要打包的html文件就new几个hwp
        // 首页
        new hwp({
            // 设置打包html的引用模板路径
            template: './view/index.html',
            // 打包后的文件名称
            filename: 'index.html',
            // 该首页打包文件需要一起打包js的文件
            // 注:html中不能包含script的引用,因为打包后会生成引用
            // 这里把公共js和首页js引用到了首页html
            chunks: ['common', 'index'],
            minify: {
                // 空格
                collapseWhitespace: true,
                // 注释
                removeConmments: true
            }
        }),
        // 购物车
        new hwp({
            template: './view/cart.html',
            filename: 'cart.html',
            // 这里把公共js和购物车js引用到了购物车html
            chunks: ['cart', 'common'],
            minify: {
                collapseWhitespace: true,
                removeConmments: true
            }
        })
    ],

    // 打包模式
    mode: 'development'
}

注:html中不能包含script的引用,因为打包后会生成引用

8,打包css资源

打包css资源我们需要用到loader资源

下载css-loaderstyle-loader

$ npm i css-loader style-loader -D

引入

const path = require('path');
const hwp = require('html-webpack-plugin');

入口

entry: './src/index.js',

输出

output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'bundle')
    },

loader

module: {
        rules: [
            {
                //定义检测文件的规则(下标为'.css'的文件
                test: /\.css$/,
                //use:使用
                //'css-loader':将css文件加载到js文件中
                //'style-loader':将加载好的文件打包
                use: ['style-loader', 'css-loader']
                //此处注意两个loader的引入顺序
                //先'style-loader'后'css-loader'
                //因为文件是从后往前执行
            }
        ]
    },

插件

plugins: [
        new hwp({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true,
                removeComment: true
            },
        })
    ],

模式

mode: 'development'

注意:js文件中必须引入css文件才能完成打包

require('./index.css');
let div = document.querySelector('div');

div.addEventListener('mouseover', function () {
 alert('经过了');
})

9,webpack打包less、sass资源

  • 准备

    打包前我们需要先下载less或sass

    less下载

    $ npm i less less-loader -D
    

    sass下载

    $ npm i node-sass sass-loader -D
    
  • 应用

     module: {
            rules: [
                {//引入less-----和css唯一的区别:在use后添加一个'less-loader'
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                }, {//引入sass-----和css唯一的区别:在use后添加一个'sass-loader'
                    test: /\.scss$/,//这个地方为scss
                    use: ['style-loader', 'css-loader', 'sass-loader']
                }
            ]
        },
    
    

    此时index.js中

    require('./indexless.less');
    require('./indexsass.scss');
    
    console.log('ls');
    

10,单独打包css资源

打包的css资源会单独存在,并且引入方式为外链式

需要下载插件mini-css-exrtact-plugin

$ npm i mini-css-exrtact-plugin -D
  • 引入

    //引入一个新的插件mini-css-extract-plugin
    const mcep = require('mini-css-extract-plugin');
    
  • 使用

     module: {
            rules: [{
                test: /\.css$/,
                //此时去掉style.loader
                //加上mcep.loader
                use: [mcep.loader, 'css-loader']
            }]
        },
            
      plugins: [
            new hwp({
                template: './src/index.html',
                filename: 'index.html',
                minify: {
                    collapseWhitespace: true,
                    removeComment: true
                }
            }),
            new mcep({
                //设置打包的css样式名称
                filename: 'index.css'
            })
        ],       
    

11,兼容css文件打包

需要使用postcss的loader来处理

  • 下载postcss-loaderpostcss-preset-env俩个loader
$ npm i postcss-loader postcss-preset-env -D
  • 创建一个配置post-css的文件postcss.config.js
module.exports = {
    //导入插件postcss-preset-env
    plugins: [
        require('postcss-preset-env')
    ]
}
  • 在package.json中加入浏览器规则browserslist
"browserslist": [
    //
    "> 0.2%",
    //支持最新两个版本的浏览器
    "last 2 versions",
    //不支持不更新的浏览器
    "not dead"
  ]
  • webpack.config.js文件中的loader中加入
module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
                //注意这里添加的postcss-loader一定是在顺序的最右
            }
        ]
    },

12,压缩css文件资源

压缩css文件我们需要下载optimize-css-assets-webpack-plugin插件

  • 下载

    $ npm i optimize-css-assets-webpack-plugin -D
    
  • 引入

    const ocawp = require('optimize-css-assets-webpack-plugin')
    
  • 使用

    plugins:[
        new ocawp()
    ]
    

13,打包图片资源

1> 在css中打包图片资源

  • 下载所需要的loader url-loaderfile-loader
$ npm i url-loader file-loader -D
  • 在文件的module中添加新的loader
module: {
        rules: [
            { test: /\.css$/, use: [mcep.loader, 'css-loader', 'postcss-loader'] },
            // 配置图片资源的打包方式
            {//制定可打包图片资源的范围-------------------并引入loader资源(url-loader)
                //options配置详细设置
                test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', options: {
                    //outputPath图片打包在bundle中的位置
                    outputPath: 'img/',
                    //publicPath即图片打包在打包的css中拼接该路径在开头
                    publicPath: './img',
                    // 设定图片打包规则,若图片小于10kb,则以哈希值的方式打包在css中,若大于10kb,则图片打包在img文件夹中
                    limit: 1024 * 10,
                    //图片名称设置
                    //【name】:默认设置文件名
                    //【hash:10】:取10位的哈希值在文件命名
                    //.【ext】:文件默认的后缀
                    name: '[name][hash:10].[ext]'
                }
            }

        ]
    },

2> 打包图片资源html

  • 需要下载html-loader
$ npm i html-loader -D
  • 应用
   module: {
        rules: [
            { test: /\.css$/, use: [mcep.loader, 'css-loader', 'postcss-loader'] },
            // 配置图片资源的打包方式
            {//制定可打包图片资源的范围-------------------并引入loader资源(url-loader)
                //options配置详细设置
                test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', options: {
                    //outputPath图片打包在bundle中的位置
                    outputPath: 'img/',
                    //publicPath即图片打包在打包的css中拼接该路径在开头
                    publicPath: './img',
                    // 设定图片打包规则,若图片小于10kb,则以base64的方式打包在css中,若大于10kb,则图片打包在img文件夹中
                    limit: 1024 * 9,
                    //图片名称设置
                    //【name】:默认设置文件名
                    //.【hash:10】:取10位的哈希值在文件命名
                    //.【ext】:文件默认的后缀
                    name: '[name].[ext]'
                }
            },
            {//使用html-loader方式加载html中的img图片
                test: /\.html$/, loader: 'html-loader', options: {
                    esModule: false,//避免出现图片路径问题
                }
            }
        ]
    },

14,打包字体图标资源

需要使用上面的loaderfile-loader

  • 使用
 module: {
        rules: [{
            //打包css资源
            test: /\.css$/, use: ['style-loader', 'css-loader']
        }, {
            // exclude:排除包含以下尾缀的文件,其他文件打包
            exclude: /\.(js|css|html|)$/,
            //引入file-loader来处理其他文件
            loader: 'file-loader',
            //详细配置
            options: {
                // 文件出口
                outputPath: 'font/',
                // 为文件拼接路径头
                publicPath: './font',
                name: '[name].[ext]'
            }
        }]
    },

注意:字体图标中的css文件按普通css正常引用

console.log('js');
require('../font/iconfont.css');

15,对js语法配置语法检查eslint

  • eslint是一个开源的语法检查工具,可以是团队的代码编写规范趋于一致

  • eslint和webpack没有关系,两者不依赖

  • 语法检查用的是eslint-loader,并且依赖eslint包,只能检查js语法

  • 需要使用js的规则库来检查代码‘airbnb’,需要eslint-config-baseeslint-plugin-import两个包

  • package.json中加入

    "eslintConfig":{
        "extends":"airbnb-base"
    }
    
  • webpack.config.js中加入

    module:{
        rules:[
            {//第三方模块的js一般不用检查语法,所依排除掉
                test:/\.js$/,
                exclude:/node_module/,
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            }
        ]
    }
    
  • 在js中(消除警告)

    //eslint-disable-next-line
    console.log(xxx);
    
    • 当检查的js中有控制台输出检查时会有警告
    • 消除方法即是在控制台语句上一行添加//eslint-disable-next-line

16,去除项目的死代码

webpack中有针对es6的代码优化

js代码优化

  • index.js
export function add(x,y) {
    return x + y;
}

export function conie(x,y) {
    return x - y ;
}

  • 入口文件app.js
import {add,conie} form './index.js';

let adds = add(2,5);

console.log(adds);

打包后:index.js

(()=>{"use strict";console.log(7)})();

# 这种项目优化只存在于生产模式

! 未解决

css代码优化

  • 下载
$ npm i purgecss-webpack-plugin -D
  • 引入
//引入path模块来用其中的join方法
const path = require('path');
//引入下载的loader
const pwp = require('purgecss-webpack-plugin');
//引入glob
const glob = require('glob');


//拼接路径
const PATHS = {src: path.join(__dirname,'src')};
  • 使用
plugins:[
    new pwp({
        path:glob.sync{pattern:`${PATHS.src}/**/*`,options: {nodir:true}}
    })
],
Logo

前往低代码交流专区

更多推荐