张宇童 - 前沿技术博客

webpack打包配置

2019-12-11 张宇童 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()

        这个插件是帮助我们自动清理打包目录的

    ]

}

标签: 配置 webpack

评论(0) 浏览(434)

BFF中间层

2019-12-9 张宇童 学习日志

中间层

目前我发现的最大的改良架构的通解 就是**增加中间层**。

比方说 前后端分离，使用 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 前端开发，实际上我们也可以理解成 中间层在计算机领域被广泛利用，最著名的还包括 计算机网络 五层模型。

 总结

以上只是我罗列的几点，实际上我觉得，基本上中间层的意义 就在于 **开发上的复用和解耦、性能上的提升**（其实缓存也就是在复用）。

标签: nodejs node 中间层 BFF

评论(0) 浏览(741)

ant-design-pro 的入口文件？

2019-12-6 张宇童 学习日志

今天在项目中遇到一个问题

在ant-design-pro中需要加入script标签

于是找了好久没有找到入口文件 没有index.html 也没有index.ejs

最后在src中的docment.ejs

ant-design-pro加入script标签

只需要在docment.ejs中加入即可

标签: javascript ES6

评论(0) 浏览(489)

私有Docker的搭建

2019-12-5 张宇童 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

标签: docker 私有hub

评论(0) 浏览(541)

Dockerfile的基本语法

2019-12-4 张宇童 Docker

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

评论(0) 浏览(354)

ant-design下载二进制字节流文件

2019-12-4 张宇童 学习日志

今天在做一个项目的时候遇到了一个问题。

其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念，下载文件就变得稍微有一点点复杂了。

因为用户使用的是前端路由。而不能够直接使用后端的路由

所有任何操作都要通过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

评论(0) 浏览(646)

docker笔记-命令篇

2019-12-3 张宇童 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

评论(0) 浏览(314)

如何创建一个Docker的image？

2019-12-2 张宇童 Docker

如何创建一个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

标签: docker 创建image

评论(0) 浏览(289)

如何自己为Array实现一个flat即扁平化输出

2019-11-26 张宇童 学习日志

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

评论(0) 浏览(525)

JavaScript快速将Array转为Object

2019-11-26 张宇童 学习日志

实现数组与对象的快速转换

首先我们来看一下正常情况下访问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

评论(0) 浏览(656)