肥林の仓库

fs文件操作模块 官方文档 fs模块：用来操作文件的模块，它提供了一系列的方法和属性，用来满足用户对文件的操作需求。 异步操作(基本方法的使用):代码展示: mkdir目录的创建.js // nodejs内置模块:fs(文件操作模块) - mkdir(创建目录)// 1.首先引入模块const fs = require('fs')// 2.调用方法// 该方法接收两个参数(创建的目录路径(绝对或者相对都可以) , 回调函数)fs.mkdir('./tx' , (err)=>{ if(err && err.code == 'EEXIST'){ console.log('该文件夹已经存在!!'); } else{ console.log('文件创建成功! 该文件夹为:' , err); }}) rename重命名目录.js // nodejs内置模块 ...

url模块 官方文档 url模块是nodejs里面的一个简单的模块，可以把url网址解析为一个对象 该模块提供三个方法: url.parse(urlString,boolean,boolean) url.format(urlObj) url.resolve(from,to) 1.url.parse(urlString,boolean,boolean) parse这个方法可以将一个url的字符串解析并返回一个url的对象 参数：urlString指传入一个url地址的字符串 第二个参数（可省）传入一个布尔值，默认为false，为true时，返回的url对象中，query的属性为一个对象。这样就方便我们读取前端传过来的query参数 第三个参数（可省）传入一个布尔值， 默认为false，//foo/bar 形式的字符串将被解释成 { pathname: ‘//foo/bar’ }；如果设置成true，//foo/bar 形式的字符串将被解释成 { host: ‘foo’, pathname: ‘/bar’ } 代码展示:// 引入url ...

内置模块(1): http模块 官方文档 http 模块是 Node.js 官方提供的用来创建 web 服务器的模块 通过 http 模块提供的 http.createServer() 方法，就能方便的把一台普通的电脑，变成一台 Web 服务器，从而对外提供 Web 资源服务。 在 Node.js 中，不需要使用 IIS、Apache（针对php） 等第三方 web 服务器软件（普通的电脑常常安装这些），而是基于 Node.js 提供的 http 模块，通过几行简单的代码，就能轻松的手写一个服务器软件，从而对外提供 web 服务 基本使用:(两种写法) server.js // nodeJS内置模块 : http模块// 1.首先引入 http 内置模块const http = require("http")// 2.创建服务器http.createServer((req , res)=>{ // 这里以一个函数为参数,用于接收浏览器传的参数,返回渲染的内容 // req:全称request,表示浏览器传来的参数 // ...

node的暴露和引入 官方文档 为什么需要暴露, 在项目的开发过程中,我们不可能在在一个文件当中写上所有的js代码,一般是将js代码分解成一个一个独立的模块,随后在项目所要用到的地方引用即可, 这就涉及了模块化的暴露和引入了 ! 要知道我们的node遵循的是commonJs语法,因此, 我们可以把公共的功能 抽离成为一个单独的 js 文件 作为一个模块，默认情况下面这个模块里面的方法或者属性，外面是没法访问的。如果要让外部可以访问模块里面的方法或者属性，就必须在模块里面通过 exports 或者 module.exports 暴露属性或者方法。 commonJS规范的模块暴露和引入(node默认)commonJS暴露的两种方法:module.exports = {需要暴露的模块}exports.xxx = 模块里面的某个接口(方法,函数) commonJS的引入const xxx = require('./模块的相对路径') //切记 xxx(模块) 最后生成的是一个对象 代码展示: 文件目录如下(在不同的文件当中引入和暴露) # ...

两种模式的合并（合并开发和生产配置） 好处：合并过后，我们就只需要 一个webpack.config.js文件即可,不在需要两个配置文件了(webpack.dev.js,webpack.prod.js) 合并流程: 新建webpack.config.js文件 // webpack.config.js[合并配置]const path = require("path");const ESLintWebpackPlugin = require("eslint-webpack-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");//css压缩插件const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//css ...

webpack在Vue项目当中的应用(2)-生产模式 Vue-loader的官方文档 基本使用: 下载vue-loader(已下载过就不需要重新下载) npm install -D vue-loader vue-template-compiler 下载其他的依赖(plugin , loader等..)(已下载过就不需要重新下载) 什么插件没下就下什么插件npm i mini-css-extract-plugin css-minimizer-webpack-plugin terser-webpack-plugin image-minimizer-webpack-plugin -Dnpm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -Dnpm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -Dnpm i copy-webpack-plugin -D 配置webpack. ...

webpack在Vue项目当中的应用-开发模式 Vue-loader的官方文档 基本使用: 下载vue-loader npm install -D vue-loader vue-template-compiler 下载其他的依赖(plugin , loader等..) 什么插件没下就下什么插件npm i vue-style-loader eslint-webpack-plugin html-webpack-plugin vue-loader webpack copy-webpack-plugin css-loader postcss-loader postcss-preset-env less-loader babel-loader webpack-cli webpack-dev-server -D 配置webpack.dev.js文件 // webpack.dev.jsconst path = require("path");const ESLintWebpackPlugin = require("eslint-webpack-plugi ...

1. Preload & Prefetch为什么需要Preload & Prefetch 我们前面已经做了代码分割，同时会使用 import 动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）。 但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。 我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。 什么是Preload & Prefetch Preload：告诉浏览器立即加载资源。 Prefetch：告诉浏览器在空闲时才开始加载资源。 两者的共同点 都只会加载资源，并不执行。 都有缓存。 两者的不同点 Preload加载优先级高，Prefetch加载优先级低。 Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。 总结： 当前页面优先级高的资源用 Preload 加载。 下一个页面需要使用的资源用 Prefetch 加载。 它们的问题：兼 ...

Code Split(多入口 & 单入口)为什么需要Code Split 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。 所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。 Code Split是什么代码分割（Code Split）主要做了两件事： 分割文件：将打包生成的文件进行分割，生成多个 js 文件。 按需加载：需要哪个文件就加载哪个文件。 使用方法 代码分割实现方式有不同的方式，为了更加方便体现它们之间的差异，我们会分别创建新的文件来演示 1. Code Split - 多入口 文件目录 ├── public├── src| ├── app.js| └── main.js├── package.json└── webpack.config.js 初始化工程以及下载包 npm init -ynpm i webpack webpack-cli html-webpack-plu ...

Tree Shaking为什么需要Tree Shaking 开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。例如elementUI等…. 如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。 这样将整个库都打包进来，体积就太大了。 Tree Shaking是什么? Tree Shaking 是一个术语(webpack中的术语)，通常用于描述移除 JavaScript 中的没有使用上的代码。 注意：它依赖 ES Module。 如何使用Tree Shaking Webpack 已经默认开启了这个功能，无需其他配置。 Babel处理重复的辅助代码为什么? Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！ Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。 你可以将这些辅助代码作为一个独立模块，来避免重复引入。 是什么 @babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime ...