火鸡面多放火鸡-优快云博客

原创模拟实现vue-router

一、vue-router实现原理hash模式hash模式是把url中#后面的内容作为路由地址，可以直接通过location.url来切换浏览器中的地址，如果只改变了路径中#后面的内容，浏览器不会向服务器发送请求，但是会把这个地址记录到浏览器访问历史中。当hash改变后，我们需要监听hash的变化做相应处理，只需要监听hashchange事件。当hash改变后就会触发hashchange事件，在hashchange事件中，我们记录当前的路由地址，并找到该路径对应的组件，重新渲染。history模式h

2020-12-14 17:35:44 307

原创 vue-router的hash模式与history模式

一、hash模式与history模式的区别不管哪种模式，都是客户端路由的实现方式，也就是当路径发生变化的时候，不会像服务器发送请求，是由 js 监视路由的变化，然后根据不同的地址，渲染不同的内容，如果需要服务器内容的话，会发送ajax请求获取。表现形式的区别hash： http://localhost:8080/#/blog?id=123hash模式中的路由地址带有#，#后面的内容作为路由地址，可以通过？携带url参数。history http://localhost:8080/detail/12

2020-12-14 15:50:10 518

原创 ESLint结合Git Hooks实现代码提交前的lint检查

ESLint结合Git Hooks实现代码提交前的lint检查前言一、Git Hooks是什么二、Husky模块的使用三、lint-staged前言在团队开发过程中，如果团队里的某一个成员没有按照要求去使用lint工具，或者说他压根忘记了去使用lint工具，最后直接把有问题的代码提交到了远端仓库，这种情况下我们在后期进行项目集成的时候，就会导致整个项目的代码出现大问题，在这个时候我们的lint工具就丧失了它的意义。而本身来说呢，我们使用lint的目的就是为了确保我们提交到仓库的代码都是没有问题的，而且

2020-12-04 23:09:12 2720

原创 Prettier的使用

Prettier的使用前言一、安装Prettier二、Prettier的使用三、write参数总结前言Prettier是近两年来使用频率特别高的一款通用的前端代码格式化工具，它很强大，几乎能够完成所有类型代码文件的格式化工作，在日常开发中，我们也可以通过它来完成代码的自动格式化。或者说针对markdown这样的文档进行格式化操作。简单地说，就是通过Prettier，我们就可以很容易的去落实前端项目中的规范化标准，而且它的使用也是非常简单的。一、安装Prettier安装yarn add pre

2020-12-04 21:25:11 2944

原创 Stylelint的使用

Stylelint的使用一、Stylelint介绍二、Stylelint的安装三、关于sass代码的检查一、Stylelint介绍在前端项目中，除了JavaScript代码需要被lint之外，css代码同样需要被lint。对于css的lint操作，我们一般会使用一个叫Stylelint的工具来进行完成，而Stylelint的使用与ESLint的使用是一致的。Stylelint提供一系列的代码检查规则供我们使用，和ESLint一样，我们也可以在配置文件中去选择性的开启或者关闭某些规则；其次，Style

2020-12-04 19:16:13 3229

原创 ESLint检查TypeScript

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档ESLint检查TypeScript前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结、、前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

2020-12-04 16:12:13 623

原创现代化项目集成ESLint

现代化项目集成ESLint前言一、Vue-cli创建一个集成了ESLint的项目前言随着React和Vue这种框架的普及，这些框架的周边生态都比较完善了，最明显的感觉就是，现阶段，如果我们再去开发一个基于React或者Vue的项目，我们基本上不用自己去配置webpack或者ESLint这些工程化工具了，因为在官方的cli工具都已经将它们集成进去了。一、Vue-cli创建一个集成了ESLint的项目没有全局安装@vue/cli的需要安装，已安装的可以跳过npm i @vue/cli -g查

2020-12-04 15:51:29 637

原创 ESLint结合Webpack使用

ESLint结合Webpack使用一、安装二、后续配置一、安装webpack集成ESLint并不是以插件的方式来完成的，而是通过loader机制。yarn add eslint eslint-loader --dev初始化eslint配置文件yarn eslint --init配置webpack.config.js中的rules { test: /\.js$/, exclude: /node_modules/, use: {

2020-12-04 15:09:54 613

原创 ESLint结合gulp使用

ESLint结合gulp使用一、安装二、使用步骤1.引入库2.读入数据总结一、安装示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')im

2020-12-04 10:52:35 671 1

原创关于ESLint的学习使用

关于ESLint的学习使用一、安装使用ESLint二、ESLint配置文件一、安装使用ESLint初始化package.jsonyarn init --yes安装ESLintyarn add eslint --dev我们先写一些有问题的代码// 01-error.jsconst foo = 123function fn () { console.log('hello') console.log('world')}fn(syy()安装ESLint后会给我们提供一

2020-12-04 09:30:53 2177

原创对Parcel的使用学习

对Parcel的使用学习一、关于Parcel二、使用Parcel总结一、关于ParcelParcel是一款完全零配置的前端打包器，它提供了近乎傻瓜式的使用体验，我们只需要了解它提供的几个简单的命令，就可以直接使用它去构建我们的前端应用程序了。二、使用Parcel先初始化一个项目中的package.json，yarn init --yes然后我们就可以安装parcel所对应的模块parce-bundler，yarn add parcel-bundler --dev，他在node_modules/bi

2020-12-03 10:01:56 1486

原创对Rollup的学习使用

对Rollup的学习使用一、什么是Rollup二、使用rollup二、Rollup配置文件三、使用插件四、Rollup加载npm模块五、Rollup加载CommonJS模块六、代码拆分七、多入口打包总结一、什么是RollupRollup也是一款ES Module的打包器，它也可以将我们项目当中一些散落的细小模块打包打包为整块的代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者是nodeJs环境。从作用上看Rollup与Webpack非常类似，不过相比于Webpack，Rollup要小巧得多。因

2020-12-02 15:31:09 1924

原创 webpack将css提取到单个文件

webpack将css提取到单个文件一、MiniCssExtractPlugin二、打包注意事项一、MiniCssExtractPluginMiniCssExtractPlugin是一个可以将css代码从打包结果当中提取出来的插件，通过这个插件我们可以实现css的按需加载。安装yarn add mini-css-extract-plugin --dev配置const MiniCssExtractPlugin = require("mini-css-extract-plugin")module

2020-12-01 11:35:45 368

原创 webpack分包

webpack之代码分割前言一、多入口打包二、提取公共模块前言通过webpack实现前端项目整体模块化的优势固然很明显，但是它同样存在一些弊端，那就是我们项目中的所有代码最终都被打包到了一起，如果我们应用非常复杂，模块非常多的话，我们的打包结果就会特别的大。而事实情况是，大多数时候，我们在应用开始工作时，并不是我们所有的模块都需要加载进来的，但是这些模块又被全部打包到一起，我们需要任何一个模块，都需要把整体加载过后才能使用，而我们的应用有一般是运行在浏览器端，那就意味着我们会浪费掉很多的流量和带宽。

2020-12-01 10:24:19 7253

原创 webpack之sideEffects

webpack之sideEffects前言一、sideEffects的使用二、sideEffects注意事项前言webpack4新增了一个sideEffects新特性，它允许我们通过配置的方式，去标识我们的代码是否有副作用，从而为Tree-shaking提供更大的压缩空间。这里的副作用指的是模块执行时除了导出成员之外所做的事情。sideEffects一般用于npm包标记是否有副作用。一、sideEffects的使用文件结构：测试文件代码如下：// components/button.

2020-11-30 15:28:30 5998 1

原创 webpack之babel-loader使Tree-shaking失效

webpack之babel-loader使Tree-shaking失效前言一、babel-loader导致Tree-shaking失效的原因二、配置babel-loader后尝试打包前言由于早期webpack发展非常快，变化也比较多，所以当我们去找资料时，我们得到的结果并不一定适用于我们当前使用的版本，对于Tree-shaking也是如此。很多资料都表示，如果我们使用了babel-loader，就会导致Tree-shaking失效。一、babel-loader导致Tree-shaking失效的原

2020-11-30 13:08:32 3760 1

原创 Webpack之Tree Shaking与Scope Hoisting

Webpack之Tree Shaking与Scope Hoisting一、Tree Shaking二、webpack中使用Tree-shanking三、Scope Hoisting一、Tree ShakingTree-shaking翻译过来就是摇树，作用就是用来【摇掉】代码中为引用的部分==未引用代码（dead-code）。webpack生产环境优化中就有这么一个功能，它可以自动检测出我们代码中那些未引用的代码，然后移除掉它们。示例：// components.jsexport const But

2020-11-30 12:21:38 692

原创 Webpack Define Plugin

Webpack Define Plugin一、Define Plugin一、Define PluginDefine Plugin的作用是代码为注入全局成员，production模式下，这个插件默认会被启用，并且往我们代码中注入了一个process.env.NODE_ENV这样的一个常量，很多第三方模块都是通过这个常量去判断运行环境，从而去决定是否执行例如打印日志这样的操作。尝试使用Define Plugin// webpack.config.jsconst webpack = require("w

2020-11-30 10:14:01 1061

原创 webpack不同环境下的配置文件

webpack不同环境下的配置文件前言一、通过函数方式指定打包模式二、多配置文件前言webpack中一些用法和特性都可以让我们在开发阶段拥有更好的开发体验，而这些开发体验提升的同时，我们的打包结果也会变得越来越臃肿。那是因为在这些过程中，webpack为了实现这些特性，自动往打包结果中添加一些额外的内容，例如source map和HMR，它们都会往输出结果中添加额外的代码来实现各自的功能，但是这些额外的代码对于生产环境来说是冗余的。因为生产环境与开发环境有很大的差异，在生产环境中我们强调以更少量更

2020-11-30 09:40:51 523

原创 webpack热更新HMR的使用

webpack热更新HMR的使用前言一、HMR初体验二、手动处理模块更新后的热替换逻辑三、HMR注意事项前言虽然我们通过webpack-dev-server可以实现修改代码后的自动刷新，但还是有一些不如人意的地方。例如我们在页面中输入一段内容，希望对这段进行样式修改，然而我们修改样式后webpack-dev-server自动刷新了，我们之前输入的内容也被刷新清除掉了，而HMR就是用来解决这样的问题的。一、HMR初体验HMR ==》 Hot Module ReplacementHMR是配合webpa

2020-11-30 09:00:10 964

原创 webpack之source map

webpack之source map前言一、什么是source map二、在webpack中启用source map三、关于source map的各种模式前言通过构建编译之类的操作，我们可以将开发阶段的源代码，转换为能够在生产环境中运行的代码，这是一种进步，但这种进步的同时也意味着我们在实际生产环境中运行的代码与我们在开发环境编写的代码之间会有很大的差异，这种情况下如果我们需要去调试应用，又或是我们在运行应用时出现了意料之外的错误，我们将无法定位错误信息。因为无论是调试还是调试还是报错都是基于转换过后的

2020-11-29 18:50:52 2985

原创 webpack5.X使用webpack-dev-server

webpack5.X使用webpack-dev-server启动服务器一、安装使用二、配置选项https://webpack.js.org/guides/development-vagrant/一、安装使用yarn add webpack-dev-server --dev启动服务器yarn webpack serve因为webpack5.X与webpack-dev-server有些冲突，无法直接使用webpack-dev-server启动服务，只能通过这种方式去调用webpack-dev-s

2020-11-28 17:21:13 7885 6

原创自定义一个webpack插件

自定义一个webpack插件因为大多数插件导出的都是一个类，然后我们通过这个类去创造一个实例。所以插件可以是一个类，我们可以通过class来定义。class MyPlugin{}webpack要求我们的插件必须是一个函数或者是一个包含apply方法的对象。class MyPlugin{ // 接收一个complier对象参数,这个参数是webpack工作中最核心的对象,其中包含了此次构建的所有配置信息,我们也是通过这个对象注册钩子函数 apply(compiler){ c

2020-11-28 16:56:16 618

原创 webpack常用插件(clean，html，copy）

webpack常用插件(clean，html，copy）一、clean-webpack-plugin二、html-webpack-plugin三、copy-webpack-plugin一、clean-webpack-plugin安装clean-webpack-pluginyarn add clean-webpack-plugin --dev配置const path = require("path")const { CleanWebpackPlugin } = require("clean-we

2020-11-28 16:38:45 473

原创手写一个简单的webpack loader

手写一个简单的webpack loader一、如何开发一个loader二、解决loader返回字符串的办法1、直接返回一段js代码2、返回html字符串总结一、如何开发一个loader首先，我们要知道，每个webpackloader都需要导出一个函数，它的输入就是加载到的文件内容，输出就是此次加工后的结果。webpack项目根目录下新建一个markdown-loader.jsmodule.exports = source => { // source 就是加载到的文件内容，尝试打印一下

2020-11-28 12:02:48 685

原创 webpack使用html-loader加载js中引入的html资源

webpack使用html-loader加载js中引入的html资源一、如何使用html-loader二、html-loader配置一、如何使用html-loader安装yarn add html-loader --dev配置webpack.config.jsmodule.exports = { ..., // 其他配置 module:{ rules:[ { test:/.html$/,

2020-11-28 11:32:34 4525

原创 webpack使用file-loader与url-loader处理图片资源加载

webpack使用file-loader与url-loader处理图片资源加载一、使用file-loader加载图片资源二、使用url-loader加载图片三、打包后图片路径不对的问题一、使用file-loader加载图片资源安装file-loaderyarn add file-loader --dev配置module:{ rules:[ { test:/.jpg|.png$/, use:'fil

2020-11-28 10:48:24 1225

原创 webpack使用babel-loader编译ES新特性

webpack使用babel-loader编译ES新特性一、安装babel-loader以及配置二、测试效果一、安装babel-loader以及配置yarn add babel-loader @babel/core @babel-preset-env --devwebpack.config.js配置module.exports = { mode:"none",// 三种工作模式: none | production | development entry:"./src/index.

2020-11-28 10:22:52 622

原创对于webpack使用心得

对于webpack使用心得一、在项目中安装webpack二、示例三、webpack配置文件四、webpack工作模式一、在项目中安装webpack初始化package.jsonyarn init --yes安装webpack及其核心模块yarn add webpack webpack-cli --dev安装webpack-cli后，我们就能通过yarn或者npm执行webpack命令yarn webpack --version// 查看webpack和webpack-cli版本，确认安装

2020-11-25 11:05:05 315

原创为什么我们需要模块打包工具

为什么我们需要模块打包工具前言一、模块化的问题1、ES Module存在环境兼容问题2、模块文件多,网路请求频繁3、所有前端资源都需要模块化小结二、提出一些设想前言模块化很好的解决了我们在复杂应用开发中的代码组织问题,但是随着我们引入模块化,我们的应用又会产生一些新的问题。一、模块化的问题1、ES Module存在环境兼容问题首先第一个就是我们所使用的ES Module这样一款模块系统,它本身就存在环境兼容问题,尽管现如今主流浏览器的最新版本都已经支持这样一个特性了。但是我们目前还没有办法去做到

2020-11-24 17:40:32 713

原创使用babel去实现ES Module的兼容

使用babel去实现ES Module的兼容前言一、安装babel二、运行ES Module代码三、使用插件完成ES Module转换前言babel是目前最主流的一款JavaScript编译器，它可以用来帮我们将一些使用了新特性的代码编译成当前环境支持的代码，有了babel后，我们就可以放心的在绝大多数环境下使用各种新特性了。这里我们就使用babel去实现低版本使用ES Module的兼容。一、安装babelyarn add @babel/core @babel/preset-env @babel/

2020-11-24 13:30:30 2059

原创 node新版本对ES Module的支持与注意事项

node新版本对ES Module的支持与注意事项一、通过package.json将所有js文件以ES Module去工作二、注意事项一、通过package.json将所有js文件以ES Module去工作在node的最新版本中，进一步的支持了ES Module，在新版本中可以通过 package.json添加一个type字段，将type字段设置为"module"，这样就会将项目中所有的js文件就会以ES Module去工作了，我们也就不用将扩展名改成mjs了。//package.json{

2020-11-24 13:02:06 13838

原创 node环境中ES Module与CommonJS的差异

node环境中ES Module与CommonJS的差异// common.js// 加载模块函数console.log(require);// 模块对象console.log(module);// 导出对象别名console.log(exports);// 当前文件绝对路径console.log(__filename);// 当前文件所在目录console.log(__dirname);执行node common.js，这些都能够成功打印出来。而在ES Module中，打

2020-11-24 12:40:09 430

原创 ES Module在nodeJS下与CommonJS的交互

ES Module在nodeJS下与CommonJS的交互一、ES Module导入CommonJS二、CommonJS导入ES Module三、总结一、ES Module导入CommonJS// es-module.mjsimport mod from "./common.js"console.log(mod)// common.jsmodule.exports = { foo:"this is foo"}执行node --experimental-modules es-module

2020-11-24 11:18:08 1024 1

原创 ES Module在node中运行

ES Module在node中运行一、在nodeJS中使用ES Module二、载入原生模块三、使用第三方模块四、提取成员一、在nodeJS中使用ES Module// module.mjsexport const foo = "hello"export const bar = "world"// index.mjsimport { foo, bar } from "./module.mjs"console.log(foo, bar );在node中想要使用ES Module,扩展名需

2020-11-24 10:53:27 1254

原创通过unpkg.com查看一个npm模块的所有文件及地址

通过unpkg.com查看一个npm模块的所有文件及地址对于一些只需要引入js文件即可使用的模块，我们只需要知道其地址，然后通过script标签引入即可。通过unpkg.com，我们可以方便的找到一个npm模块的js文件地址。以Browser ES Module Loader为例，在网址栏中输入unpkg.com/browser-es-module-loader，就会进入到https://unpkg.com/browser-es-module-loader@0.4.1/dist/browser-es-

2020-11-23 16:10:10 3792 1

空空如也

空空如也