python 爬虫

2022-06-17

通过网络获取远程对象

	urlopen 用来打开并读取一个从网络获取的远程对象。因为它是一个非常通用的函数（可以轻松读取 HTML 文件、图像文件或其他任何文件流）
#python 内置库
from urllib.request import urlopen

html =urlopen('http://pythonscraping.com/pages/page1.html')
print(html.read())

more >>

展开全文 >>

python基础

2022-06-17

通用语言，脚本语言，开源语言，跨平台语言，多模型语言

2000年 1.0 版本

2008年 2.0 版本

3.0系列不兼容早期的2.0

more >>

展开全文 >>

微信小程序拓展

2022-06-17

小程序框架

1：WeUI 小程序–使用教程

https://weui.io/

官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。

[图片上传失败…(image-5dd2d3-1654073247786)]

2：美团小程序框架mpvue

Github：https://github.com/Meituan-Dianping/mpvue 官网： http://mpvue.com/

官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。

3：组件化开发框架wepy

Github地址: https://github.com/Tencent/wepy 官网地址： https://tencent.github.io/wepy

官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包.

[图片上传失败…(image-f7e73e-1654073247786)]

4：官方框架MINA

地址：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

5：Tina.js

一款轻巧的渐进式微信小程序框架

Tina.js 开源框架地址： https://github.com/tinajs/tina

官方介绍：是一款轻巧的渐进式微信小程序框架，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。

6：前端框架weweb

地址: https://github.com/wdfe/weweb

官方介绍：weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。

7：微信UI组件库 iView Weapp

https://weapp.iviewui.com/

介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。

8：ZanUI-WeApp –

一个颜值高、好用、易扩展的微信小程序 UI 库

https://cnodejs.org/topic/589d625a5c8036f7019e7a4a

官方介绍：ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。包含 badge、btn、等共计 17 类组件或元素。

9：uniApp

– 一个多端混合开发的好用的框架，熟悉一个适用性超强
框架地址： https://uniapp.dcloud.io/collocation/pages 文档地址： https://uniapp.dcloud.io/README 相适应的ide：Hbuilder 可以直接使用该ide打包相应所需的端代码官方介绍：开发一次，覆盖多端

小程序容器

所谓”小程序容器”，就是一个小程序的运行环境。 App 只要加载这个运行环境，就具备了运行小程序的能力。说得直白一点，它让你拥有了微信那样的小程序引擎，但是不必自己开发。

以前的方案是将小程序代码打包成适配各种平台的小程序运行环境。小程序容器则是可以适配各种小程序框架的代码，不需要额外打包成其他格式，直接运行

小程序容器 FinClip

FinClip 提供一套 SDK，不仅支持手机（iPhone、Android），还支持桌面（Windows、Linux、macOS）、手表、车机等各种平台。你的 App 只要加载了这套 SDK，就能直接运行微信小程序（以及小游戏），一行代码也不用修改。

也就是说，它完全支持微信小程序的 WXML 语法，无需二次开发，体验与微信端保持一致。你就可以把你的小程序，在微信运行一份，在自己的 App 也运行一份。

同时，它还支持 小程序一键转换成 App，可以将已有小程序代码导出为 IOS 与 Android 中可用的工程文件,并上架至各应用市场。由于导出的工程文件自动集成了 FinClip SDK ，所以直接拥有小程序的运行能力，后续可在这个 APP 上继续上架更多小程序，自建自己的小程序生态。

对于小型开发者，这个产品是免费使用，只有企业级应用才需要付费。

小游戏引擎（ RealClip）

这个引擎重点针对小游戏的性能和兼容性，进行了优化，除了微信小游戏，还兼容 Unity、Cocos、Laya、Egret Engine 等主流引擎和 WebView。也就是说，无论哪种引擎制作的小游戏，都能够直接运行在你的 App 中。他是与 FinClip 配套的。

配套开发工具 FinClip Studio。这个工具能将现有的小程序/小游戏代码，一键转换成独立 App，做成可用于 iOS、Android 和鸿蒙的安装包。

展开全文 >>

webpack 配置

2022-06-17

初始化项目

1	yarn init -y

添加 webpack-cli

1	yarn add webpack-cli -D

基础配置:(webpack.config.js)

let path = require('path');

module.exports = {
    mode: 'development', // 开发环境，生产环境 production
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 输出文件名
        // filename: 'bundle.[hash].js', // 输出文件名，添加hash值
        // filename: 'bundle.[hash:10].js', // 输出文件名，添加10位hash值
        path: path.resolve(__dirname, 'build'), // 输出路径（绝对路径）
    }
}

打包命令：

// 可通过 --config 传入参数设置配置文件名称 默认（webpack.config.js）
npx webpack --config webpack.config.js

// 在 package.json 中 设置 scripts 脚本

"script": {
    "build": "webpack"
}

执行：
npm run build

webpack node方式启动项目

1	yarn add webpack-dev-server -D

配置文件添加配置：

devServer: {
	port: 3000,
	progress: true,
	contentBase: './build'
}

添加脚本

1
2
3

"script": {
    "dev": "webpack-dev-server "
}

安装 htmlWebpackPlugin 插件

将打包后的js,注入到 html 模板中

1	yarn add html-webpack-plugin -D

配置文件：

let htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',// 模板的位置
            filename: 'index.html',// 打包后模板的名字
            minify: {
                removeAttributeQuotes: true,// 移出双引号
                collapseWhitespace:  true,// 压缩成一行
                hash: true,// 注入的js 文件名添加hash值
                
            }
        })
    ]
}

样式处理

引入适合的loader，在配置 loader 处理规则

css-loader 处理 @import 这种语法映入的样式

style-loader 把css 插入到 head 标签中

处理 less: less-loader

处理 sass: node-sass sass-loader

处理 stylus: stylus-loader

配置：

module.exports = {
    ...
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       {
                        loader: 'style-loader',
                        options: {
                            // 设置插入到 标签顶部，这样自己在页面添加 style 标签优先级更高
                            insertAt: 'top'
                        }
                    }, 
                     'css-loader'
                  ]
			},
            {test: '/\.less$/',use: [
                {
                    loader: 'style-loader',
                     options: {
                        // 设置插入到 标签顶部，这样自己在页面添加 style 标签优先级更高
                        insertAt: 'top'
                    }
                },
                'css-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

样式抽离：mini-css-extract-plugin

为啥要用这个？

上述配置最终都是通过 style-loader 将样式转化为 style 标签插入到 head 标签中

而这个插件则是将 css 转化为 link 标签再插入 head 中、

它用于代替 style-loader。

1	yarn add mini-css-extract-plugin -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',// 模板的位置
            filename: 'index.html',// 打包后模板的名字
            minify: {
                removeAttributeQuotes: true,// 移出双引号
                collapseWhitespace:  true,// 压缩成一行
                hash: true,// 注入的js 文件名添加hash值
                
            }
        }),
        new MiniCssExctractPlugin({
           filename: 'main.css' 
        })
    ],
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入 
                     'css-loader'
                  ]
			},
            {test: '/\.less$/',use: [
                MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入,
                'css-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

给样式添加后缀：autoprefixer, postcss-loader

1	yarn add autoprefixer postcss-loader -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入 
                     'css-loader',
                    'postcss-loader',
                  ]
			},
            {test: '/\.less$/',use: [
                MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入,
                'css-loader',
                'postcss-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

还需要配置 postcss-loader 使用 autoprefixer 插件

根目录新增 postcss.config.js

1
2
3

module.exports = {
	plugins: [require('autoprefixer')]
}

css 压缩：optimize-css-assets-webpack-plugin

js 压缩：uglifyjs-webpack-plugin

1	yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')
// 使用了css 压缩后，默认js压缩失效，需使用 插件压缩 js.
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    ...,
    optimization: {// 优化项
    	minimizer: [
    		new UglifyJsPlugin({
    			cache: true,
    			sourceMap: true,// 是否并发打包，压缩多个
    			paraller: true
            }),
    		new OptimizeCss()
        ]
    
    },
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入 
                     'css-loader',
                    'postcss-loader',
                  ]
			},
            {test: '/\.less$/',use: [
                MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入,
                'css-loader',
                'postcss-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

es高级语法降级处理

babel 三件套

babel-loader 转化源文件

@babel/core 核心模块有转化方法

@babel/preset-env 转化模块，es6->es5

@babel/plugin-proposal-class-properties 兼容es高级class语法

@babel/plugin-proposal-decorators 兼容装饰器语法

1	yarn add babel-loader @babel/core @babel/preset-env -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')

module.exports = {
    ...,
    module: {
    	rules: [
    	  {
    		test: '/\.js$/',
    		use: {
    		  loader: 'babel-loader',
    		  options: {
    			// 大插件集合，转换es6-> es5
    			presets: [
    			  '@babel/preset-env'
                ],
                // 小插件，转换 高级 es语法
                plugins: [
                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    '@babel/plugin-proposal-class-properties',
                    "@babel/plugin-transform-runtime"
                ]
               }
            },
            // 只匹配 scr目录下js, 不包括 node_modules目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
          }
    		
    	]
    }
}

处理js语法及校验

生成器，promise 等一些内置方法，可能需要额外配置

@babel/plugin-transform-runtime

@babel-polyfill 兼容更高es语法,

1 2	// 生产开发都需要 yarn add @babel/plugin-transform-runtime @babel-polyfill

// "./app/js" 为js 入口
entry: ["@babel/polyfill", "./app/js"],module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

js语法校验： eslint

官网可视化配置，配置完后可直接下载配置文件 .eslintrc.json

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')

module.exports = {
    ...,
    module: {
    	rules: [
    	  {
    		test: /\.js$/,
    		use: {
    			loader: 'eslint-loader',
    			options: {
                    enforce: 'pre', // 在从下往上执行规则中 先使用它，  post 后使用它
                }
            },
            
          },
    	  {
    		test: '/\.js$/',
    		use: {
    		  loader: 'babel-loader',
    		  options: {
    			// 大插件集合，转换es6-> es5
    			presets: [
    			  '@babel/preset-env'
                ],
                // 小插件，转换 高级 es语法
                plugins: [
                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    '@babel/plugin-proposal-class-properties',
                    "@babel/plugin-transform-runtime"
                ]
               }
            },
            // 只匹配 scr目录下js, 不包括 node_modules目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
          }
    		
    	]
    }
}

引入全局变量

例如：将 jQuery 暴露到全局

在代码中通过内联loader 将 jQuery 以 $ 暴露到全局

1	import $ from 'expose-loader?$!jquery'

在配置项中引入，这样

module.exports = {
	...,
    module: {
        rules: [
		test: require.resolve('jquery'),
		use: 'expose-loader?$'
        ]
    }
}

// 使用,需要手动引入
import $ from 'jquery'

每个模块自动注入$

let webpack = require('webpack')
module.exports = {
	...,
	plugin:s: [
	  new webpack.ProvidePlugin({
	    $: 'jquery'
	  })
	]
}

还可以在index.html 模板用 script 标签引用 jquery CDN

通过MDN引入的依赖，需要设置不需要打包选项

通过 externals 使webpack 不处理某些依赖库

module.exports = {
	...,
	externals: {
		jquery: '$'
	}
}

图片处理

图片的引入方式

1、在 js 中创建图片引入

2、在css引入 background(‘url’)

3、

import url from './logo.png'
let image = new Image();

image.src = url

document.append(image)

使用 file-loader 处理

file-loader 默认在内部生成一张图片到 build 目录，把生成图片的名字返回来

background 中的图片路径 css-loader 回去处理

1	yarn add file-loader -D

module.exports = {
	...,
    module: {
        rules: [
		test: /\.(png|jpg|jpeg|gif)$/,
		use: 'file-loader'
        ]
    }
}

处理页面 img 标签中的图片 url

1	yarn add html-withimg-loader -D

module.exports = {
	...,
    module: {
        rules: [
		test: /\.html$/,
		use: 'html-withimg-loader'
        ]
    }
}

url-loader

url-loader 内部实现了 file-loader. 一般代替file-loader处理图片，将体积小的图片转成base64位，减少请求次数.

体积大的图片再用file-loader 处理

module.exports = {
	...,
    module: {
        rules: [
		test: /\.(png|jpg|jpeg|gif)$/,
		use: {
			loader: 'url-loader',
			options: {
				limit: 200*1024,// 小于200K 转 base64
				outputPath: 'img/', //将图片打包到 build/img 文件夹中
			}
		}
        ]
    }
}

打包文件分类

就是将打包的文件放置指定的文件，使打包文件具有层次

module.exports = {
    output: {
        filename: 'bundle.js', // 输出文件名
        // filename: 'bundle.[hash].js', // 输出文件名，添加hash值
        // filename: 'bundle.[hash:10].js', // 输出文件名，添加10位hash值
        path: path.resolve(__dirname, 'build'), // 输出路径（绝对路径）
        publicPath: './'
    }
	...,
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',// 模板的位置
            filename: 'index.html',// 打包后模板的名字
            minify: {
                removeAttributeQuotes: true,// 移出双引号
                collapseWhitespace:  true,// 压缩成一行
                hash: true,// 注入的js 文件名添加hash值
                
            }
        }),
        new MiniCssExctractPlugin({
           filename: '/css/main.css' 
        })
    ],
    module: {
        rules: [
		test: /\.(png|jpg|jpeg|gif)$/,
		use: {
			loader: 'url-loader',
			options: {
				limit: 200*1024,// 小于200K 转 base64
				outputPath: '/img/', //将图片打包到 build/img 文件夹中
            	 publicPath: 'www.xxx.com',// 给图片单独设置 publicPath
			}
		}
        ]
    }
}

多页应用打包

多入口，多出口. webpack 会打包多个入口js.

多个html 模板，需要借助 html-webpack-plugin 插件

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表 home,other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // 默认打包，home,other 都会在两个html中引入
    // 通过 chunks 设置只引入需要的入口js
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            template: './other.html',
            filename: 'other.html'
            chunks: ['other']
        })
    ]
}

配置 source-map

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    ...,
    // 源码映射 用于调试，打包后的js 被压缩处理，看不见源码
    // 增加映射文件，标识错误行列信息
    devtool: 'source-map',// 
    // 不会产生单独文件，但是可以显示错误行信息
    //devtool: 'eval-source-map',
    // 不会产生行列信息，但是是一个单独的映射文件
    //devtool: 'cheap-module-source-map',
    // 不会产生文件,集成在打包文件中，不会产生列信息,有行信息
    //devtool: 'cheap-module-eval-source-map' 

}

webpack 实时打包

代码修改已保存就更新页面

module.exports = {
    ...,
    watch: true,
    watchOptions: {
    	poll: 1000,// 每秒问我 1000次
    	aggreatementTimeout: 500 // 防抖，500毫秒内只打包一次
    	ignored: /node_modules/,// 不需要监控
    }
}

webpack 小插件

实用常用的插件

cleanWebpackPlugin

每次打包时清除上次的dist目录

1	yarn add clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    ...,
    plugins: [
    	// 每次打包 清除 dist 文件夹
    	new CleanWebpackPlugin('./dist')
    ]
}

copyWebpackPlugin

可以将指定文件或文件夹复制到指定文件

1	yarn add copy-webpack-plugin -D

const copyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
    ...,
    plugins: [
    	// 每次打包 复制 文件/夹 到指定目录。可指定多个动作
    	new copyWebpackPlugin([
    		{
                from: './doc',
                to: './dist'
            }
        ])
    ]
}

bannerPlugin(wenpack内置)

const webpack = require('webpack')

module.exports = {
    ...,
    plugins: [
    	new webpack.bannerPlugin('make on 2022 by xxx')
    ]
}

webpack 跨域配置

前端开发测试时可配置 proxy 解决跨域问题

// 比如 页面服务是 localhost 8080, 接口服务localhost 3000
module.exports = {
    ...,
    devServer: {
    	//1、 如果后端是用express 写的，可以用中间件（webpack-dev-middleware）读取前端配置，实现前后端运行在一个端口	
    
    	before(app): {//2、 此处可模拟服务请求数据, [express 服务]
    		app.get('/user', (req, res)=> {
                res.json({name: 'xxx'})
            })
        },
    	//3、 把localhost:8080/api	开头的请求转发到 把localhost:3000
    	// localhost:8080/api/user -> localhost:3000/user
    	proxy: {
    		"/api": {
    			target: 'http://localhost:3000',
    			pathRewrite: {'/api', ''}
    		}
    	}
    }
}

resolve 解析

对第三方模块的优化处理

module.exports = {
    ...,
    resolve: { // 解析第三方模块 common
    	// 从当前路径查找依赖，不要去父级及其他路径去找了
    	module: [path.resolve('node_modules')],
        // 第三方模块的package.json 文件 main 字段 默认入口，可设置先找 style，没有在找 main
        mainFilds: ['style', 'main'],
        // 配置别名
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        // 省略后缀的处理, 先视为js 文件，没有就找 css 最后找 json 文件
        extensions: ['.js', '.css', '.json']
    }
}

注入环境变量区分开发环境

const webpack = require('webpack')
module.exports = {
    ...,
    plugins: [
    	new webpack.DefinedPlugin({
    		DEV: "'dev'"// JOSN.stringif('dev')
        })
    ]
}

访问： 
console.log(DEV)

优化项

noParse 不解析某些包

我们在 require 某个依赖时，webpack 默认会去解析这个依赖是否还依赖其他包，有的话就一起打包

noParse 则可设置不去检查这个依赖了

module.exports = {
    ...,
    module: {
    	noParse: /jquery/, // 不去解析 jQuery 依赖库
    }
}

排除，忽略某些文件

在进行某个规则可具体优化。

在引用momentjs 实践处理库时，moment 默认引入了所有语言包，导致文件打包很大，可以设置忽略语言包

// 设置语言包忽略后，如果要设置中文，需要手动引入中文包
import 'moment/local/zh-cn';
moment.locale('zh-cn')

module.exports = {
    ...,
    plugins: [
    	new webpack.IgnorePlugin(/\./locale//, /moment/)
    ],
    module: {
    	{
    		test: /\.js$/,
    		exclude: /node_modules/, // 排除
    		include: path.resolve('src'),// 只找 src 下js
    		use: ...
    	}
    }
}

动态链接库

开发中，有些不会变的模块可以提前打包成库，后边直接使用打包好的库。不需要每次都打包,下次打包体积就变小了

例如：react, react-dom 模块

新增打包配置文件 webpack-config.react.js

let path = require('path')
let webpack = require('webpack')
module.exports = {
	mode: 'devlopment',
    entry: {
        react: ['react', 'react-dom'],
    },
    output: {
        filename: '_dll_[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: '_dll_[name]',// 打包后的模块名
        // libraryTarget: 'val' // commonj var this ..., 模块化模式 CMD，AMD，Commonjs
    },
    plugins: [
        new webpack.DLLPlugin({
            // name == library
            name: '_dll_[name]',
            // 清单, 模块名映射关系
            path: path.resolve(__dirname, 'dist', 'minifest.json')
        })
    ]
}

webpack.config.js 配置引用

let path = require('path')
let webpack = require('webpack')
module.exports = {
	...,
    plugins: [
        new webpack.DLLReferencePlugin({
            manifest: path.resolve(__dirname, 'dist', 'manifest.json')
        })
    ]
}

在index.html 中使用打包好的库

1	<script src="/_dll_react.js" ></script>

多线程打包进程

使用第三方模块 happypack, 项目体积大的时候会使打包速度变快

let path = require('path')
let HappyPack = require('happypack')
module.exports = {
	...,
    module: {
    	{
    		test: /\.js$/,
    		exclude: /node_modules/, // 排除
    		include: path.resolve('src'),// 只找 src 下js
    		use: 'HappyPack/loader?id=js'
    	},
        {
            test: /\.css$/, 
            use: 'HappyPck/loader?id=css'
        },
    }
    plugins: [
     new HappyPack({
         id: 'js',
         use: [
             {
               loader: 'babel-loader',
    		  options: {
    			presets: [
    			  '@babel/preset-env'
                ],
                plugins: [
                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    '@babel/plugin-proposal-class-properties',
                    "@babel/plugin-transform-runtime"
                ]
             }
         ]
     }),
      new HappyPack({
         id: 'js',
         use: [
           {
                loader: 'style-loader',
                options: {
                    insertAt: 'top'
                }
            }, 
             'css-loader'
          ]
        ]
     }),
     
}

webpack 自带的优化

tree-shaking

生产环境下打包会去除没用的代码, 但只对 import 语法有效。通过 require 方式引入的模块不会优化

scope hosting

作用域提升

let a = 1;

let b = 2;

let c = 3;

let d = a + b + c;
console.log(d)


代码会被编译为：
console.log(6)

抽离公共代码

多入口环境下才能配置

页面都引用了 a/b.js. 所以缓存 a/b.js

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'production',
    optimization: {
      splitChunks: {// 分割代码块
          cacheGroups: {
              common: {// 符合条件抽离成公共模块
                  chunks: 'initial', // 入口处开始分析
                  minSize: 500*1024,// 体积大于500kb
                  minChunks: 2,// 至少引用了2次
              },
              // 抽离第三方模块为公共
              vendor: {
                  priorty: 1, // 权重，优先抽离公共模快
                  test: /node_modules/,// 抽离出来
                  chunks: 'initial', // 入口处开始分析
                  minSize: 500*1024,// 体积大于500kb
                  minChunks: 2,// 至少引用了2次
              }
          }
      }  
    },
	entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表 home,other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // 默认打包，home,other 都会在两个html中引入
    // 通过 chunks 设置只引入需要的入口js
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',
        }),
        new HtmlWebpackPlugin({
            template: './other.html',
            filename: 'other.html'
        })
    ]
}

webpack懒加载

es6 草案语法 , 不管是 vue,还是react 都是靠这个语法实现的懒加载

1	import('/xxx.js').then(data=> {})

webpack热更新

module.exports = {
    ...,
    devServer: {
    	port: 3000,
    	open: true,
    	contentBase: './dist',
    	hot: true, // 开启热更新
    },
    plugins: [
        // 可打印提示哪个模块更新了，
        new webpack.NameModulePlugin(),
        // 热更新插件
        new webpack.HotModuleReplacementPlugin()
    ]
}

监听data模块变化

import str from './data';

if(module.hot) {
    module.hot.accept('./data', ()=> {
        let str = require('./data');
        console.log(str)
    })
}

图片压缩方案

image-minimizer-webpack-plugin

vue-cli 项目中 vue.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageMinimizerPlugin({
        minimizerOptions: {
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
            [
              "svgo",
              {
                plugins: [
                  {
                    removeViewBox: false
                  }
                ]
              }
            ]
          ]
        }
      })
    ]
  }
};

展开全文 >>

webpack 配置

2022-06-17

涉及知识

构建工具：Webpack5.x
前端框架：Vue 3.x
路由工具：Vue Router 4.x
CSS 预编译：Less
Git Hook 工具：husky
代码规范：Prettier + Eslint + Airbnb
自动部署：Github Actions

more >>

展开全文 >>

微信公众号环境搭建

2022-06-17

注册微信公众号

1、注册地址
https://mp.weixin.qq.com/

-服务号：主要偏向于服务交互（功能类似12315，114，银行，提供绑定信息，服务交互），每月可群发4条消息；服务号适用人群：**媒体、企业、政府或其他组织。

-订阅号：主要偏向于为用户传达资讯，（功能类似报纸杂志，为用户提供新闻信息或娱乐趣事），每天可群发1条消息；订阅号适用人群**：个人、媒体、企业、政府或其他组织。

2、注册测试公众号
	个人订阅号有一些接口是没有权限的，也就是说个人订阅号无法调用一些高级的权限接口,如生成二维码、网页授权、自定义菜单、微信支付这样的接口权限个人订阅号是没有调用权限的, 幸运的是，微信公众平台提供了测试公众账号，测试公众号有很多个人订阅号不具备的权限, 测试公众号的注册地址为：
	http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
	
3、搭建本地测试环境
	开发基于微信公众号的应用最大的痛苦之处就是调试问题，每次实现一个功能后都需要部署到一个公网服务器进行测试，因为微信用户每次向公众号发起请求时，微信服务器会先接收到用户的请求，然后再转发到我们的服务器上，也就是说，微信服务器是要和我们的服务器进行网络交互，所以我们必须保证我们的服务器外网可以访问到
    国内提供Ngrok服务比较好的网站是:http://natapp.cn/
	需手机号，支付宝注册，实名

展开全文 >>

微信小程序开发流程

2022-06-17

小程序注册

注册小程序账号

在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。

选择注册的账号类型

选择“小程序”，点击“查看类型区别”可查看不同类型账号的区别和优势。

填写邮箱和密码

请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。

激活邮箱

登录邮箱，查收激活邮件，点击激活链接。

填写主体信息

点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。

选择主体类型

主体类型说明如下：

账号主体	范围
个人	18岁以上有国内身份信息的微信实名用户
企业	企业、分支机构、企业相关品牌。
企业（个体工商户）	个体工商户。
政府	国内、各级、各类政府机构、事业单位、具有行政职能的社会组织等。目前主要覆盖公安机构、党团机构、司法机构、交通机构、旅游机构、工商税务机构、市政机构等。
媒体	报纸、杂志、电视、电台、通讯社、其他等。
其他组织	不属于政府、媒体、企业或个人的类型。

填写主体信息并选择验证方式

企业类型账号可选择两种主体验证方式。
- 方式一：需要用公司的对公账户向腾讯公司打款来验证主体身份。打款信息在提交主体信息后可以查看到。
- 方式二：通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。

政府、媒体、其他组织类型账号，必须通过微信认证验证主体身份。认证通过前，小程序部分功能暂无法使用。

微信认证入口：登录小程序 - 设置 - 微信认证详情

填写管理员信息

确认主体信息不可变更

点击确认完成注册流程

选择对公打款的用户，请根据页面提示，向指定的收款账号汇入指定金额。

注意：请在10天内完成汇款，否则将注册失败。

选择通过微信认证验证主体身份的用户，完成注册流程后请尽快进行微信认证，认证完成之前部分功能暂不可使用。

小程序信息完善及开发前准备

登录小程序管理平台

完成注册后，在微信公众平台官网首页（mp.weixin.qq.com）的登录入口直接登录。

完善小程序信息

完成注册后，微信小程序信息完善步骤和开发可同步进行。

选择对公打款的用户，完成汇款验证后，可以补充小程序名称信息，上传小程序头像，填写小程序介绍并选择服务范围。

开发前准备

绑定开发者

登录小程序管理后台（mp.weixin.qq.com）– 用户身份 – 成员管理 – 添加成员。

个人主体小程序最多可绑定15个项目成员，15个体验成员。

未认证、未发布非个人的小程序最多可绑定30个项目成员，30个体验成员。

已认证未发布/未认证已发布非个人的小程序最多可绑定60个项目成员，60个体验成员。

已认证已发布非个人的小程序最多可绑定90个项目成员，90个体验成员。

获取AppID

进入“设置-开发设置”，获取AppID信息。

代码审核与发布

提交审核

登录微信公众平台小程序，进入版本管理，开发版本中展示已上传的代码，管理员可提交审核或是删除代码。

审核信息填写

配置功能页面

填写重要业务页面的类目与标签，重要业务页面组数不多于5组。

测试账号

当小程序需要开发者提供测试账号才能完成审核体验时，小程序在首次提交审核时将被打回，再次提交审核时将开放提供测试账号的入口，该入口将由开发者提供账号给微信审核人员审核微信小程序时登录使用。

完成提交

提交审核完成后，开发管理页中审核版本模块展示审核进度。

提示：

开发者可参考《微信小程序平台常见拒绝情形》，详细了解审核标准。

代码发布

代码审核通过，需要开发者手动点击发布，小程序才会发布到线上提供服务。

注意：

内测期间，代码发布按钮不可点击。

展开全文 >>

微信小程序入门实践

2022-06-17

https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html

实例源码

可在微信中搜索“小程序示例”

所有项目源代码、资源文件等内容都将在微信公众号中提供下载地址。读者可以从我的微信公众号中获取项目效果图和最新版本源代码。代码包括Orange Can项目的小程序代码及部分功能的服务端PHP代码。
• 微信公众号：小楼昨夜又秋风
• 知乎专栏：小楼昨夜又秋风
• 知乎ID：七月在夏天
读者可以访问地址：http://pan.baidu.com/s/1cxQXie（注意区分数字和英文字母大小写）获得本书源代码。如果在下载过程中遇到问题，请发电子邮件至booksaga@126.com，邮件主题设置为“微信小程序开发入门与实践配书资源”。

more >>

展开全文 >>

bat 批量化处理命令

2022-06-17

bat

batchfile
批量化处理命令，集成在windows系统中。
dos下的批处理文件，可以极大的简化日常电脑处理中的一些重复性的任务，在我们电脑的使用过程中起着重要的作用。

-> power shall -> 可执行程序

命令查询
https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands

git仓库
	考虑了批处理脚本的收集、示例以及各种命令的一些细节。课程包括系统管理、文件管理、计算机维护、互联网工具和网络管理。
github.com/happy05dz/Batch-Script-Collection

more >>

展开全文 >>

VMware Workstation15虚拟机

2022-06-17

安装教程

…

本地连接测试

发现错误 ifconfig 命令未找到

1
2
3

yum search ifconfig # 来搜索可用或者匹配的安装包程序。

yum install net-tools #  安装匹配结果 net-tools

查询 ip

ifconfig

找到 inet addr:192.168.1.11, 这个格式就是虚拟机ip了

1	ssh root@192.168.1.11

输入命名就能连接成功了

展开全文 >>

通过网络获取远程对象

小程序框架

1：WeUI 小程序–使用教程

2：美团小程序框架mpvue

3：组件化开发框架wepy

4：官方框架MINA

5：Tina.js

6：前端框架weweb

7：微信UI组件库 iView Weapp

8：ZanUI-WeApp –

9：uniApp

小程序容器

小程序容器 FinClip

小游戏引擎（ RealClip）

初始化项目

添加 webpack-cli

webpack node方式启动项目

安装 htmlWebpackPlugin 插件

样式处理

样式抽离：mini-css-extract-plugin

给样式添加后缀：autoprefixer, postcss-loader

es高级语法降级处理

处理js语法及校验

引入全局变量

图片处理

打包文件分类

多页应用打包

配置 source-map

webpack 实时打包

webpack 小插件

webpack 跨域配置

resolve 解析

注入环境变量区分 开发环境

优化项

noParse 不解析某些包

排除，忽略某些文件

动态链接库

多线程打包 进程

webpack 自带的优化

抽离公共代码

webpack懒加载

webpack热更新

图片压缩方案

注册微信公众号

小程序注册

注册小程序账号

选择注册的账号类型

填写邮箱和密码

激活邮箱

填写主体信息

选择主体类型

填写主体信息并选择验证方式

填写管理员信息

确认主体信息不可变更

点击确认完成注册流程

小程序信息完善及开发前准备

登录小程序管理平台

完善小程序信息

开发前准备

绑定开发者

获取AppID

代码审核与发布

提交审核

审核信息填写

配置功能页面

测试账号

完成提交

代码发布

bat

安装教程

本地连接测试

注入环境变量区分开发环境

多线程打包进程