包管理器
飞羽逐星
既然厌倦于追寻,那便一觅其中;自从一股逆风袭来,我已学会抵挡八面来风。
展开
-
webpack性能优化(一)
性能优化一、减少模块解析1.什么叫做模块解析2.不做模块解析会怎样3.哪些模块不需要解析4.如何让某个模块不要解析二、优化loader性能1.进一步限制loader的应用范围2.缓存loader的结果3.为loader的运行开启多线程三、热替换 HMR1.流程2.使用和原理3.样式热替换一、减少模块解析1.什么叫做模块解析模块解析包括:抽象语法树分析、依赖分析、模块语法替换2.不做模块解析会怎样如果某个模块不做解析,该模块经过loader处理后的代码就是最终代码。如果没有loader对该模块原创 2020-08-30 20:12:13 · 1021 阅读 · 1 评论 -
webpack性能优化概述
性能优化概述一、性能优化概述一、性能优化概述本章所讲的性能优化主要体现在三个方面:构建性能这里所说的构建性能,是指在开发阶段的构建性能,而不是生产环境的构建性能优化的目标,是降低从打包开始,到代码效果呈现所经过的时间构建性能会影响开发效率。构建性能越高,开发过程中时间的浪费越少传输性能传输性能是指,打包后的JS代码传输到浏览器经过的时间在优化传输性能时要考虑到:总传输量:所有需要传输的JS文件的内容加起来,就是总传输量,重复代码越少,总传输量越少文件数量:当访问页面时,需要传输的J原创 2020-08-30 08:55:55 · 256 阅读 · 0 评论 -
babel预设、插件和webpack中运行
babel预设一、babel预设1.babel预设二、babel插件1.`@babel/plugin-proposal-class-properties`2.`@babel/plugin-proposal-function-bind`3.`@babel/plugin-proposal-optional-chaining`4.`babel-plugin-transform-remove-console`5.`@babel/plugin-transform-runtime`三、webpack中运行一、babe原创 2020-08-29 21:44:28 · 1029 阅读 · 1 评论 -
babel的安装和使用
babel的安装和使用一、babel的安装1.babel简介2.babel的安装二、babel的使用1.babel的使用2.babel的配置一、babel的安装官网:https://babeljs.io/民间中文网:https://www.babeljs.cn/1.babel简介babel一词来自于希伯来语,直译为巴别塔巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔,不同版本的浏览器能识别的ES标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,和古巴比伦原创 2020-08-29 16:57:50 · 1357 阅读 · 0 评论 -
抽离css文件
抽离css文件一、抽离css文件一、抽离css文件目前,css代码被css-loader转换后,交给的是style-loader进行处理。style-loader使用的方式是用一段js代码,将样式加入到style元素中。而实际的开发中,我们往往希望依赖的样式最终形成一个css文件此时,就需要用到一个库:mini-css-extract-plugin该库提供了1个plugin和1个loaderplugin:负责生成css文件loader:负责记录要生成的css文件的内容,同时导出开启css-原创 2020-08-29 11:05:01 · 505 阅读 · 0 评论 -
预编译器less
预编译器less一、预编译器less1.基本原理2.LESS的安装和使用3.LESS的基本使用4.webpack中使用一、预编译器less1.基本原理编写css时,受限于css语言本身,常常难以处理一些问题:重复的样式值:例如常用颜色、常用尺寸重复的代码段:例如绝对定位居中、清除浮动重复的嵌套书写由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题其中一种方案,便是预编译器预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为原创 2020-08-27 23:59:48 · 981 阅读 · 0 评论 -
css module
css module一、css module1.思路2.实现原理3.如何应用样式一、css module1.思路通过命名规范来限制类名太过死板,而css in js虽然足够灵活,但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题css module 遵循以下思路解决类名冲突问题:css的类名冲突往往发生在大型项目中大型项目往往会使用构建工具(webpack等)搭建工程构建工具允许将css样式切分为更加精细的模块同JS的变量一样,每个css模块文件中难以出现冲突原创 2020-08-27 13:30:57 · 5822 阅读 · 0 评论 -
css in js
css in js一、css in js一、css in jscss in js 的核心思想是:用一个JS对象来描述样式,而不是css样式表例如下面的对象就是一个用于描述样式的对象:const styles = { backgroundColor: "#f40", color: "#fff", width: "400px", height: "500px", margin: "0 auto"}由于这种描述样式的方式根本就不存在类名,自然不会有类名冲突至原创 2020-08-26 23:03:34 · 1080 阅读 · 0 评论 -
css命名方法-BEM
这里写目录标题一、BEM一、BEMBEM是一套针对css类样式的命名方法。其他命名方法还有:OOCSS、AMCSS、SMACSS等等BEM全称是:Block Element Modifier一个完整的BEM类名:block__element_modifier,例如:banner__dot_selected,可以表示:轮播图中,处于选中状态的小圆点三个部分的具体含义为:Block:页面中的大区域,表示最顶级的划分,例如:轮播图(banner)、布局(layout)、文章(article)原创 2020-08-26 21:51:35 · 371 阅读 · 0 评论 -
webpack拆分css
这里写目录标题1.利用webpack拆分css {ignore}1.css-loader2.style-loader1.利用webpack拆分css {ignore}要拆分css,就必须把css当成像js那样的模块;要把css当成模块,就必须有一个构建工具(webpack),它具备合并代码的能力而webpack本身只能读取css文件的内容、将其当作JS代码进行分析,因此,会导致错误于是,就必须有一个loader,能够将css代码转换为js代码1.css-loadercss-loader的作用,就原创 2020-08-26 20:06:53 · 761 阅读 · 0 评论 -
webpack-css工程化
css工程化一、css工程化1.类名冲突的问题2.重复样式3.css文件细分问题4.如何解决1.解决类名冲突2.解决重复样式的问题3.解决css文件细分问题一、css工程化1.类名冲突的问题当你写一个css类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?你会发现,怎么都不好过深的层级不利于编写、阅读、压缩、复用过浅的层级容易导致类名冲突一旦样式多起来,这个问题就会变得越发严重,其实归根结底,就是类名冲突不好解决的问题2.重复样式这种问题就更普遍了,一些重复的样式值总是不断的出现原创 2020-08-26 17:17:40 · 296 阅读 · 0 评论 -
webpack内置插件
内置插件一、内置插件DefinePluginBannerPluginProvidePlugin一、内置插件所有的webpack内置插件都作为webpack的静态属性存在的,使用下面的方式即可创建一个插件对象const webpack = require("webpack")new webpack.插件名(options)DefinePlugin全局常量定义插件,使用该插件通常定义一些常量值,例如:new webpack.DefinePlugin({ PI: `Math.PI`, /原创 2020-08-26 09:57:54 · 595 阅读 · 0 评论 -
webpack常用拓展
常用拓展一、CleanWebpackPlugin二、HtmlWebpackPlugin三、CopyPlugin四、file-loader五、url-loader六、路径问题一、CleanWebpackPlugin每次打包后不会再次生成新的文件,而是对原来打包的文件进行更新// webpack.config.jsvar { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = { mode: "devel原创 2020-08-25 22:37:17 · 434 阅读 · 0 评论 -
webpack区分环境和其它配置
区分环境一、区分环境二、其他配置1.context2.output1.library2.libraryTarget3.target4.module.noParse5.resolve1.modules2.extensions3.alias6.externals7.stats一、区分环境有些时候,我们需要针对生产环境和开发环境分别书写webpack配置为了更好的适应这种要求,webpack允许配置不仅可以是一个对象,还可以是一个函数module.exports = env => { ret原创 2020-08-25 10:23:13 · 1111 阅读 · 0 评论 -
webpack-loader和plugins
loader一、loader1.处理loaders流程2.loader配置3.loader匹配规则二、plugin1.事件名称2.事件类型3.处理函数一、loaderwebpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。webpack loader: loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块原创 2020-08-23 16:03:36 · 514 阅读 · 0 评论 -
webpack入口与出口
入口与出口一、入口与出口1.出口2.入口二、实践1.一个页面一个整合js2.一个页面多个整合js3.单页应用一、入口与出口模块化代码中,比如require("./"),表示当前js文件所在的目录在路径处理中,"./"表示node运行目录__dirname: 所有情况下,都表示当前运行的js文件所在的目录,它是一个绝对路径//dirname.jsconsole.log(__dirname);node内置模块 - path: https://nodejs.org/dist/late原创 2020-08-23 09:09:22 · 1014 阅读 · 0 评论 -
webpack编译过程
编译过程一、编译过程1.初始化2.编译3.输出4.总过程一、编译过程webpack 的作用是将源代码编译(构建、打包)成最终代码整个过程大致分为三个步骤初始化编译输出1.初始化此阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象。例:以及终端命令,整理成最终配置对象对配置的处理过程是依托一个第三方库yargs完成的此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置2.原创 2020-08-22 20:27:40 · 1038 阅读 · 0 评论 -
webpack编译分析和配置文件
编译分析和配置文件一、编译分析二、配置文件一、编译分析//a.jsconsole.log('module a');module.exports = 'a';//index.jsconsole.log('module index');var a = require('./a');console.log(a);我们这里思考打包过程,如果整理模块,且不互相污染变量var modules = {//通过一个变量,将模块保存为对象形式 './src/a.js': function(mo原创 2020-08-22 10:37:03 · 383 阅读 · 0 评论 -
webpack-模块化兼容性
模块化兼容性一、模块化兼容性1.同模块化标准2.不同模块化标准3.最佳实践一、模块化兼容性由于webpack同时支持CommonJS和ES6 module,因此需要理解它们互操作时webpack是如何处理的1.同模块化标准如果导出和导入使用的是同一种模块化标准,打包后的效果和之前学习的模块化没有任何差异2.不同模块化标准不同的模块化标准,webpack按照如下的方式处理// ./src/a.jsexport default {//es6导出 a: 1, b: 2,原创 2020-08-21 21:11:09 · 387 阅读 · 0 评论 -
webpack安装使用
webpack安装使用一、安装1.webpack简介2.webpack的安装二、使用一、安装webpack官网:https://www.webpackjs.com/目前的最新版本:webpack41.webpack简介webpack是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。webpack的特点:为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工原创 2020-08-21 16:22:26 · 422 阅读 · 0 评论 -
webpack-浏览器端实现模块化
浏览器端实现模块化一、浏览器端的模块化2.根本原因3.解决办法4.常见的构建工具一、浏览器端的模块化问题:效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率兼容性问题:浏览器目前仅支持ES6的模块化标准,并且还存在兼容性问题工具问题:浏览器不支持npm下载的第三方包这些仅仅是前端工程化的一个缩影当开发一个具有规模的程序,你将遇到非常多的非业务问题,这些问题包括:执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等,我们将这些问题称之原创 2020-08-21 11:41:58 · 493 阅读 · 0 评论 -
其它包管理器
其它包管理器一、cnpm二、nvm1.下载和安装2.使用nvm三、pnpm1.全局安装pnpm2.pnpm原理3.注意事项四、bower一、cnpm官网地址:https://npm.taobao.org/为解决国内用户连接npm registry缓慢的问题,淘宝搭建了自己的registry,即淘宝npm镜像源过去,npm没有提供修改registry的功能,因此,淘宝提供了一个CLI工具即cnpm,它支持除了npm publish以外的所有命令,只不过连接的是淘宝镜像源如今,npm已经支持修改r原创 2020-08-20 16:38:08 · 879 阅读 · 0 评论 -
yarn学习
yarn学习一、yarn命令二、yarn 的特别礼物一、yarn命令初始化初始化:yarn init [--yes/-y]与npm init同理安装添加指定包:yarn [global] add package-name [--dev/-D] [--exact/-E]安装package.json中的所有依赖:yarn install [--production/--prod]脚本和本地CLI运行脚本:yarn run 脚本名与npm run同理start、stop、tes原创 2020-08-20 11:15:47 · 4125 阅读 · 0 评论 -
yarn简介
yarn简介一、yarn简介一、yarn简介yarn 官网:https://www.yarnpkg.com/zh-Hans/yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,它仍然使用 npm 的registry,不过提供了全新 CLI 来对包进行管理过去,yarn 的出现极大的抢夺了 npm 的市场,甚至有人戏言,npm 只剩下一个 registry 了。之所以会出现这种情况,是因为在过去,npm 存在下面的问题:依赖目原创 2020-08-20 09:29:15 · 2574 阅读 · 0 评论 -
发布包
发布包一、发布包1.准备工作2.发布一、发布包1.准备工作移除淘宝镜像源npm config delete registry到npm官网注册一个账号,并完成邮箱认证本地使用 npm cli 进行登录使用命令npm login登录使用命令npm whoami查看当前登录的账号使用命令npm logout注销创建工程根目录使用npm init进行初始化(package.json)2.发布开发确定版本(package.json的version)使用命令npm publish原创 2020-08-19 22:22:20 · 365 阅读 · 0 评论 -
npm命令
npm命令一、npm命令二、环境配置1.在node中读取package.json三、其它npm命令1.安装2.查询3.更新4.卸载包5.npm 配置一、npm命令在开发的过程中,我们可能会反复使用很多的 CLI 命令,例如:启动工程命令(node 或 一些第三方包提供的CLI命令)部署工程命令(一些第三方包提供的CLI命令)测试工程命令(一些第三方包提供的CLI命令)于是,npm 非常贴心的支持了脚本,只需要在 package.json 中配置 scripts 字段,即可配置各种脚本名称之后原创 2020-08-19 21:55:03 · 4363 阅读 · 0 评论 -
包语义版本
语义版本一、语义版本1.回顾:版本号规则2.语义版本3.避免还原的差异4.npm的差异版本处理一、语义版本思考:如果你编写了一个包A,依赖另外一个包B,你在编写代码时,包B的版本是2.4.1,你是希望使用你包的人一定要安装包B,并且是2.4.1版本,还是希望他可以安装更高的版本,如果你希望它安装更高的版本,高的什么程度呢?1.回顾:版本号规则版本规范:主版本号.次版本号.补丁版本号主版本号:仅当程序发生了重大变化时才会增长,如新增了重要功能、新增了大量的API、技术架构发生了重大变化次版本号:原创 2020-08-19 16:31:15 · 306 阅读 · 0 评论 -
使用包实现简易数据爬虫
简易数据爬虫一、实现一、实现需要用到的包:axios:专门用于在各种环境中发送网络请求,并获取到服务器响应结果cheerio:jquery的核心逻辑包,支持所有环境,可用于讲一个html字符串转换成为jquery对象,并通过jquery对象完成后续操作fs:node核心模块,专门用于文件处理 。- fs.writeFile(文件名, 数据)//getMoviesjsconst axios = require('axios');const cheerio = require("cheeri原创 2020-08-19 11:36:15 · 273 阅读 · 0 评论 -
包的安装、配置、使用
安装、配置、使用一、包的安装1.本地安装2.全局安装二、包的配置1.配置文件2.保存依赖关系三、包的使用一、包的安装安装(install)即下载包由于 npm 的官方 registry 服务器位于国外,可能受网速影响导致下载缓慢或失败。因此,安装好 npm 之后,需要重新设置 registry 的地址为国内地址。目前,淘宝 https://registry.npm.taobao.org 提供了国内的 registry 地址,先设置到该地址。设置方式为npm config set registry h原创 2020-08-19 00:17:04 · 988 阅读 · 0 评论 -
包管理器概述
包管理器概述一、包管理器概述1.概念2.背景3.前端包管理器一、包管理器概述1.概念模块(module)通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块或主模块库(library,简称lib)以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案包(package)包含元数据的库,这些元数据包括:名称、描述、git主页、许可证协议、作者、依赖等等2.背景CommonJS 的出现,使 node 环境下的 JS 代码可以用模块更加细粒度的划分。一个类、一个函原创 2020-08-18 16:25:44 · 969 阅读 · 0 评论