认识学习NPM笔记（持续更新中）

最新推荐文章于 2022-09-30 09:07:58 发布

林之.

最新推荐文章于 2022-09-30 09:07:58 发布

阅读量353

点赞数

分类专栏： npm 文章标签：前端 npm

本文链接：https://blog.csdn.net/m0_51144154/article/details/121453289

版权

npm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

NPM介绍

在这里插入图片描述

npm本身也是一个包，并且里面有很多包，比如BootStrap、jQuery、vuecli等都被上传到npm这个包中（就是包管理器）
Node.js内置npm

NPM安装

1）可以在官网: http://nodejs.cn 下载nodejs，安装好了nodejs默认就安装了npm
2）查看自己是否安装并且完成node的环境配置成功

在这里插入图片描述

用 ‘管理员身份’ 打开命令窗口，输入图片的代码，如果都出现相应版本号则表示安装成功
①更新npm的一个命令：npm install npm -g (用npm自己全局安装自己就可以实现更新)
②卸载npm：npm uninstall -g npm

3）利用npm安装自己需要的软件包

用户在哪个目录下安装的包，那这个包就在哪，所以安装需要的包之前先创建一个项目目录，作为存储包的目录
如下是在testinstall 目录下全局安装了jQuery包，但是testinstall目录下并没有这个包，因为我们用的是全局安装，所以这个目录看不到，并且我们所有目录中都可用jQuery了
测试非全局在testinstall目录下安装moment包,这时候我们的文件夹中就会出现相应安装包的文件了。
* .package-lock.json 为这个配置文件的锁
（package-lock.json的作用就是锁定安装时的版本号并上传到git上，保证其他人在npm install时下载的依赖都保持一直。）
注意点：当安装比较慢的时候，可以npm镜像设置

NPM的使用

在这里插入图片描述

package.json文件属性详解

1）可以直接输入 npm init --yes 产生默认空的 package.json 文件
或者输入 npm init 然后自己一个一个输入 package.json 文件的每一个配置

2）分析例图：
mLLg==,size_20,color_FFFFFF,t_70,g_se,x_16)

name 为我们文件的名称
version 为版本号
description ：对文件的描述
main : 意思是主文件入口(又叫：entry point)，一般默认为 index.js
test command：测试命令
git repository：（代码包存放的地方类型）git
keywords：(搜索关键字)
author：(作者)
license：(规范) “MIT”
script：脚本，我们可以用 npm run test （上述test是它里面命令的名称）运行它里面的命令。（比如我们可以把上述test中内容改为 dir 则运行后会显示这个文件夹里的文件内容）
当我们在这个目录下执行 npm install moment -save，发现在 package.json中会出现一个 dependencies ：运行时依赖
当执行 npm install bootstrap -save-dev 会在package.json中出现 devDependencies：开发时依赖
我们可以把node_modules中的文件都删除，再执行 npm install 则其中被删除的文件又会在原文件中被下载回来。这是因为package.json文件中都记录了开发时依赖和运行时依赖以及它们的版本号等
package-lock.json时依赖package.json产生的是为了锁定它里面文件的下载版本
关于版本号：例如 ^3.5.1 表示更新时 3 不会变，而后面两个数字会变成当时最大的版本号; 又如 ~3.5.1 表示更新时3.5两个数字不会变，最后一个数字会变成当时最大的版本号；如果什么都不写只为 3.5.1 表示固定为 3.5.1版本不随新版本变化

3）总结：
在这里插入图片描述

NPM常用命令

1)npm常用命令
在这里插入图片描述 2)包的使用
3）测试使用require语句导入包

4）ES6兼容性解决
①、在线转换测试：需要去静态资源网拿到相应的babel转换链接，并且，脚本类型要更改为 type = “text/babel”
②、提前编译测试浏览器兼容：
在这里插入图片描述

先在终端执行 npm install --save-dev babel-cli 命令安装babel，再新建一个.babelrc目录插入上述代码
然后执行上述我们需要的库的代码
然后创建一个源代码目录src，再建一个渲染目录 lib
然后就可以在src目录中创建.js文件写代码了(如 index.js)
这时候我们在package.json中添加上面的代码
然后在终端执行 npm run build 这时候lib中就会产生index.js文件

认识Yarn

1)yarn的介绍
在这里插入图片描述 2)yarn的安装
3)yarn的基本使用

在这里插入图片描述
3)yarn的基本使用
4)yarn的基本使用

webpack5实战应用

一、

学习目标和学习基础
- 可以使用webpack搭建开发环境
- 可以使用webpack打包优化项目
需要基础
- NPM使用的基础
- ES6语法了解
- 需要NODE一点点应用

二、了解 webpack 原理和概念
在这里插入图片描述三、

四、尝试进行webpack打包项目

在src中创建first、index、second三个模块化项目.
用 webpack --mode development 命令可以将它们打包成一个（开发时环境）文件夹dist并且生成main.js这个最终被打包成的js文件，执行main.js可以(node dist/main.js) 可以得出想要结果
用 webpack --mode production 命令可以将它们打包成(生产时环境，也就是我们上线用的)一个dist文件夹…

在这里插入图片描述
五、webpack的5个核心概念
1).

以上这些配置都是需要配置到 webpack.config.js 中的
如图

在这里插入图片描述
2). 多入口和多出口情况配置说明
①. webpack.config.js文件：

const {resolve} = require('path'); //这是node.js中语法，在output中调用resolve这个方法可以帮助我们找到这个项目的当前目录

module.exports = {
//    1.entry 入口 指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图

    //单入口：如果只有一个入口，使用字符串指定指定一个入口文件，打包一个chunk,输出一个bundle，chunk的名称是默认的
    entry:'./src/index.js',

    //多入口：写成Array形式，所有的入口文件形成一个chunk，名称是默认的，输出也是只有一个bundle
    // entry:["./src/index.js","./src/main.js"],
    //多入口：Object写法形式，有几个入口文件就会生成几个chunk，并输出几个bundle，chunk的名称是key
            //用Object的好处是可以把n个相应的入口文件 输出成相应的n个输出文件
           //并且输出的filename: '[name].js'
    // entry:{
    //     one:"./src/index.js",
    //     two:"./src/main.js"
    // },
    //多入口：特殊写法(混合式) 有几个入口文件就会生成几个chunk，并输出几个bundle，chunk的名称是key

    // entry:{
    //     //举例：就是当你既需要n个入口文件生成1个打包输出文件，又需要生成某一个入口文件的打包输出文件时候用
    //     // 这就是特殊写法的作用
    //   onea:['./src/main.js','./src/index.js'],
    //     twob:'./src/index.js'
    // },

//    2.output 输出 指示webpack打包后的资源bundles 输出到哪里，以及如何命名
    output: {
        filename:'[name].js',//不是Object和特殊写法的时候也可以写为 build.js
        path:resolve(__dirname,'build')//__dirname表示当前根目录 ‘build’表示创建build目录

    },


    //3.loader 可以让webpack能够去处理哪些非javascript资源css、img、less等，将它们处理成webpack 能识别的资源
    //可以理解为一个翻译的过程(webpack 自身只能理解js和json)
    module: {
        rules: [  //写相应规则

        ]
    },

    //4.plugins插件(plugins)可用于执行范围更广的任务，插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等
    plugins:[

    ],


    //5.mode 模式 指示webpack使用相应模式的配置
    //开发模式：配置比较简单，能让代码本地调试运行的环境
    //生产模式：代码需要不断优化达到性能最好，能让代码优化上线运行的环境
    //都会自动启用一些插件，生产模式使用的插件更多
    mode: "development"  //生产模式：production 开发模式：development
}

②总结：
在这里插入图片描述
3).webpack 打包html资源

webpack打包html资源测试代码片段


    //4.plugins插件(plugins)可用于执行范围更广的任务，插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等
    plugins:[
        //第一种默认创建：默认会创建一个空的，目的就是自动引入打包的资源(js/css)
        // new HtmlWebpackPlugin(),

        //第二种自己引入相应文件并且命名.
        //用第二种方法就不要自己在原html文件中引入js文件了,webpack会自动会帮我们打包引入entry中的js文件到新创建的html文件中
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "demo.html",
        })

4).webpack 压缩js和html代码

在这里插入图片描述

new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "demo.html",

            //压缩html代码
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true,
            }
        })

5).webpack 打包多html开发案例
在这里插入图片描述

webpack.config.js代码片段

const {resolve} = require('path'); //这是node.js中语法，在output中调用resolve这个方法可以帮助我们找到这个项目的当前目录
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
//    1.entry 入口 指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图

    entry:{
      vendor:['./src/js/jquery.js','./src/js/common.js'],
        index:"./src/js/index.js",
        cart:'./src/js/cart.js'
    },

//    2.output 输出 指示webpack打包后的资源bundles 输出到哪里，以及如何命名
    output: {
        filename:'[name].js',//不是Object和特殊写法的时候也可以写为 build.js
        path:resolve(__dirname,'build')//__dirname表示当前根目录 ‘build’表示创建build目录

    },


    //3.loader 可以让webpack能够去处理哪些非javascript资源css、img、less等，将它们处理成webpack 能识别的资源
    module: {
        rules: [  //写相应规则

        ]
    },

    //4.plugins插件(plugins)可用于执行范围更广的任务，插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            filename:"index.html",

            chunks:['index','vendor'], //用chunks可以指定要打包的文件，如果不用可能会混入其他文件

            minify:{
                collapseWhitespace:true,
                removeComments:true,

            }
        }),

        new HtmlWebpackPlugin({
            template:"./src/cart.html",
            filename:"cart.html",

            chunks:['cart','vendor'],
        }),

    ],



    mode: "development"  //生产模式：production 开发模式：development
}

6).webpack 打包CSS资源

第一步需要安装两个工具包，npm i css-loader stytle-loader -D (css-loader作用：将css文件打包到js文件中；stytle-loader作用：将打包好的js文件放到html中去)
第二步在入口js文件(index.js)中引入所需要的.css样式(require(’./stytle.css’));
（不用再index.html文件中引入某什么，因为 style-loader 会自动把打包好的js文件引入到html文件中去打包好）
第三步在webpack.config.js文件中配置好 loader 和 plugins

在这里插入图片描述

总结

在这里插入图片描述
7).webpack 打包CSS资源

第一步用npm安装less包 (让我们可以使用less语法) 和less-loader(将less语法转为css用的)；用npm安装node-sass (让我们可以使用sass语法) 包和sass-loder (将sass语法转为css用的)
第二步创建.less、.scss文件，并写出相应样式(以Less为例子)
第三步在index.js文件中引入样式文件
第四步在webpack.config.js(配置文件中对样式文件进行打包)
最后运行
总结：

8).webpack 提取CSS为单独文件

第一步安装插件 mini-css-extract-plugin ，这个插件可以将css样式提取成一个单独的文件
第二部在webpack.config.js中引入插件

在这里插入图片描述
3. 在plugin模块中使用插件

在这里插入图片描述 4. 第四步在loader配置中style样式改为插件这种的，就可以帮我们打包成一个.css单独文件

4. 我们可以看到打包的build文件中产生了一个.css文件，并且在.htm文件中有 link 标签引入了 .css 文件

在这里插入图片描述
5. 运行结果

在这里插入图片描述 7. 总结

9).webpack

林之.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
认识学习NPM笔记（持续更新中）

NPM介绍npm本身也是一个包，并且里面有很多包，比如BootStrap、jQuery、vuecli等都被上传到npm这个包中（就是包管理器）Node.js内置npmNPM安装1）可以在官网: http://nodejs.cn 下载nodejs，安装好了nodejs默认就安装了npm2）查看自己是否安装并且完成node的环境配置成功用 ‘管理员身份’ 打开命令窗口，输入图片的代码，如果都出现相应版本号则表示安装成功①更新npm的一个命令：npm install npm -g (用n
复制链接

扫一扫