webpack打包配置
我写这篇文章一来是为了巩固自己的学习
二来是为了更多的同学在学习webpack中有所收获
webpack安装分为两种 一种是全局安装global
一种是局部安装local
我个人觉得我比较喜欢使用局部安装。不管然和插件
全局暗转只需要执行
npm install webpack webpack-cli -g
安装完成之后就可以是看到版本号了
webpack -v
本地安装命令一样不需要加-g
本地安装的同学大家使用webpack一定会报错 not fount webpack
因为我们没有全局安装所以在执行webpack的时候没有找到 很正常
原理很简单在termainal中执行webpack 的时候是全局的webpack
这个时候我们就可以使用npx webpack了
npx是执行局部的webpack
下面我们来看一看webpack如何使用
第一种方法是
直接执行npx webpack index.js
可以看到打包了一个js文件
第二种方法是配置一个webpack.config.js
里面的配置大家可以跟我一起写
我就不用代码高亮了,这个代码高亮的编辑器使用太麻烦。自己也懒得改
直接写了,写一句我会解释一句
const path = require('path')
这一句的意思是引入nodejs的path模块因为我们后面会使用到
module.exports = {
mode: 'production',
这一句的意思是 告诉webpack我们要使用什么模式 有生产模式 和开发模式 分别为production and development
entry: {
main: './src/index.js',
sub: 'xxx.js'
}
这一句的意思是 告诉webpack 我们要从什么文件开始打包,我这里填写为src目录下面的index.js文件开始, 如果为对象即是打包多个文件的意思
output: {
这里面填写打包完成的文件放到什么地方
filename: 'mian.js',
这一句意思是打包完成后文件叫main.js
path: path.resolve(__dirname, 'dist')
这一句的意思是打包好的文件放到什么路径,我们这里填写dist目录下
},
module: {
这里面是告诉webpack我们如何打包除了js以外的文件
rules: [
这里面填写相应的规则
{
test: /\.png$/,
这一句的意思是要对png文件作出处理
use: {
loader: 'file-loader',
这里是告诉webpack 我们要处理的png使用file-loader模块处理
name: '[hash]_[name].[ext]',
这里是告诉webpack 我们需要输出的名称
outputPath: 'images/',
这里我们告诉webpack我们这个文件要输出的地址
}
},
{
test: /\.scss/,
这里设置sass文件打包设置
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
这个loader的意思是要将打包的css进行浏览器适配处理
]
}
]
},
plugins: [
new HtmlWebpackplugin([
template: '/src/index.html'
这里是设置模版文件
]),
new CleanWebpackPlugin()
这个插件是帮助我们自动清理打包目录的
]
}
BFF中间层
中间层目前我发现的最大的改良架构的通解 就是**增加中间层**。
比方说 前后端分离,使用 node 来做**BFF(backend for frontend)**,实际上就是在传统前后端 增加了 node这一层,通过此有两点好处,一个是前端彻底接管了 view 层,后端渲染也开始全部由前端掌控,另一个就是 接口层 增加了一层。
BFF 的前端接口层
我称之为前端接口层,众所周知,后端接口返回的数据往往是不适合前端使用,因为后端的数据是来自于领域建模,而前端作为数据的消费者,所想要的数据其实是 ui数据,无论是数据的含义、还是需要的数据种类、数据结构都往往有巨大的改变,所以我们需要做 **数据转换**。
service 层
如果把这些数据转换 **集中式处理**的时候,通常会称之为 service 层。在有 node 之前 这个 service层实际上是在前端完成的,这有时候会导致严重的性能问题,
性能上
比方用户的一个点击事件,我们需要三种数据源,并且数据源之间互相依赖,这时候,我们必须异步串行的请求数据,一个交互事件所需的等待耗时大大加剧。
其次,复用和缓存 很难做,比方说跨页面的 相同service 需求。
在 node 端 实现的 BFF 的前端接口层实际上还是 service 层,只不过 service 层 是在服务器上运行的,缓存就很好利用起来了,比方说,A 需要 一种service,B 也需要相同的 service ,又恰好 A、B 的输入 key 相同,则这个 service的结果可以缓存起来,并且被复用。
开发上
BFF 的 service 层,可以很容易做到**应用级别的复用**。
还有很重要的一点是,**解耦**。
假如没有 service层,我们可以想象,当后端数据源发生了改变,那么前端页面也需要改变,当然,我们通常会要求后端数据源不变,但是总有万一,一旦数据源发生改变,由于前端页面是紧密耦合到数据接口的,所以需要改动的地方非常之多。但是在这种情况下,如果我们有数据转换这一层,实际上在这一层改改,保证前端消费的数据格式不变,即可应对这次数据源的变化。
缓存
上面提到了缓存,其实,**缓存也是中间层的一个显著代表**,它就是 数据源 和 数据消费者 中间的一层。只不过它的用途不是 fordev 而是 for performance。
缓存的思想在计算机领域被广泛应用,cpu、内存、外存、web 后端开发、web 前端开发,实际上我们也可以理解成 中间层在计算机领域被广泛利用,最著名的还包括 计算机网络 五层模型。
总结
以上只是我罗列的几点,实际上我觉得,基本上中间层的意义 就在于 **开发上的复用和解耦、性能上的提升**(其实缓存也就是在复用)。
ant-design-pro 的入口文件?
今天在项目中遇到一个问题
在ant-design-pro中需要加入script标签
于是找了好久没有找到入口文件 没有index.html 也没有index.ejs
最后在src中的docment.ejs
ant-design-pro加入script标签
只需要在docment.ejs中加入即可
标签: javascript ES6
私有Docker的搭建
首先我们最好有一台Linux的服务器
然后我们到docker hub 上面搜索registry
找到命令
docker run -d -p 5000:5000 --restart always --name registry registry:2然后复制粘贴
后面我们打开服务器添加doemon.json文件到/etc/docker/目录下
内容大约可以为
{ "insecure-registries":["129.28.193.114:5000"] }虽然不安全但是注册了的地址
然后到文件/lib/systemd/system/docker.service中添加一句话
EnvironmentFile=-/etc/docker/doemon.json最后我们重启docker程序即可
sudo service docker restart
Dockerfile的基本语法
FROM
FROM scratch 制作base image
FROM centos 制作base image
FROM ubuntu:14.04
LABEL
LABEL maintainer='admin@zyt8.cn'
LABEL version='v1.0'
LABEL description='this is zhangyutong blog'
RUN
RUN yum update && yum install vim 为了避免多余的无用layer尽量合并为一行代码
WORKDIR
WORKDIR /root 用WORKDIR改变当前工作目录,如果根目录没有root将会自动创建root
其实WORKDIR 和 RUN cd 一样 但是尽量使用WORKDIR
ADD and COPY
ADD hello / 将hello可执行程序add到image的根目录
ADD hello.tar.gz / 添加到根目录并且解压缩
ENV
ENV MYSQL_VISION 5.4 定义一个常量
RUN and CMD
RUN 是执行命令并且创建新的image layer
CMD 是设置容器启动后默认设置的命令和参数
ENTRYPOINT 是设置容器启动时运行的命令
标签: docker dockerfile
ant-design下载二进制字节流文件
今天在做一个项目的时候遇到了一个问题。
其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念,下载文件就变得稍微有一点点复杂了。
因为用户使用的是前端路由。而不能够直接使用后端的路由
所有任何操作都要通过API来实现
这样的话即使服务器上面有文件也很难下载。
因为链接不能够直达
所有我就用服务器返回我们需要下载文件的二进制字节流格式
然后在前端直接下载即可。但是由于经过前端的一层layer所以最好就是下载小文件。大文件就不必使用这种方法了
首先我们在前端ant-design中新建一个路由
export async function download(id) { return request(`/api/testadmin/download_template/${id}`,{ responseType : 'blob' }) }注意⚠️responseType一定要为blob
然后在模型中写一个方法effect
*_download({ id }, { call }) { return yield call(download, id) }然后就可以直接下载保存了
if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(temp_data, '项目必要文件.zip'); } else { const link = document.createElement('a'); const evt = document.createEvent('MouseEvents'); link.style.display = 'none'; link.href = window.URL.createObjectURL(temp_data); link.download = '项目必要文件.zip'; document.body.appendChild(link); // 此写法兼容可火狐浏览器 evt.initEvent('click', false, false); link.dispatchEvent(evt); document.body.removeChild(link); }后端的代码我就不贴了
标签: javascript ES6
docker笔记-命令篇
docker 基础命令
docker run imageName # 运行一个image容器 docker build -t ImageName . # 意思是在当前目录下寻在Dockerfile文件并且编译 docker image ls # 列出所有image docker container ls -a # 列出已经退出的container docker container ls # 列出运行中的container docker container rm containerName # 移除一个container docker rm containerName # 是docker container rm containerName 简写 docker image rm imageName # 移除一个image docker rmi imageName # 移除一个image 是 docker image rm imageName 的简写 docker ps # 和docker container ls 一个意思 docker container ls -aq # 列举出来所有container的ID docker ps -aq # 是docker container ls -aq的简写 docker container rm $(docker container ls -aq) # 清楚所有container
docker commit containerName newContainerName # 将container提交成新的image
如何创建一个Docker的image?
如何创建一个docker的容器呢?
起始非常简单
我们首先需要简单的写一个小程序
就用c语言些吧。
Linux中需要使用到gcc 和 glibc-static包
#include<stdio.h> int main() { printf('hello world\n') }将我们刚刚写的小程序编译 gcc -static hello.c -o hello即可
然后我们创建一个Dockerfile文件
vim Dockerfile我们写上代码
FROM scratch ADD hello / CMD ["/hello"]
输入命令
docker build -t 295367893/hello .这一句的命令意思是 使用docker 编译 image 文件?
怎么编译呢?在当前目录下自动查找Dockerfile 文件
使用以下命令以运行
docker run 295367893/hello
还有一条命令是可以看到docker image 的语句的 也就是layer
docker history imageId
如何自己为Array实现一个flat即扁平化输出
let a = [1,2,3,4,5,[6,7, 8, [9,[10,11,[12,[13]]]]]] console.log(a) // (6) [1, 2, 3, 4, 5, Array(4)] console.log(flat(a)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] function flat(arr) { const temp_arr = []; arr.forEach(x => { if (x instanceof Array) { temp_arr.push(...flat(x)) }else { temp_arr.push(x) } }) return temp_arr; }
标签: javascript ES6
JavaScript快速将Array转为Object
实现数组与对象的快速转换
首先我们来看一下正常情况下访问bar值
arr = [['bar',3],['two',6]] // 正常访问 bar console.log(arr[0][0]) // bar
使用新的API访问bar值 Object.fromEntries()
// ES10新的API Object.fromEntries() const obj = Object.fromEntries(arr) console.log(obj.bar) // 3小实例
这个时候我们有一个object类型的数据,我们需要去除key的长度不等于3的元素。我们该怎么样做呢
const obj = { abc: '1', bcd: '2', fjdkls: '3', }
思路:我们已知数组的API要远远多于object的API,那么我们可以现将obj转为array
const arr = Object.entries(obj) console.log(arr) // (3) [Array(2), Array(2), Array(2)] // 0: (2) ["abc", "1"] // 1: (2) ["bcd", "2"] // 2: (2) ["fjdkls", "3"] // length: 3 // __proto__: Array(0)这里我使用了Object.entries()将对象转为了数组
这下就可以直接使用filter进行对数组的过滤了
const res = arr.filter(([k,v]) => { return k.length === 3; }) console.log(res) // (2) [Array(2), Array(2)] // 0: (2) ["abc", "1"] // 1: (2) ["bcd", "2"] // length: 2 // __proto__: Array(0)过滤完后我们得到了我们想要的结果,但这还不是最终的结果。因为它现在是数组。我们要将它变为对象
const res_obj = Object.fromEntries(res) console.log(res_obj) // {abc: "1", bcd: "2"}处理完成
标签: javascript ES6