webpack服务器渲染react环境搭建

2019-12-23 张宇童 webpack

本片博客写给我自己看,他人如果看不懂可以留言

首先配置下需要设置

target: 'node',

安装webpack-node-externals

配置

externals: [nodeExternals()]

安装

isomorphic-style-loader

配置rules中cssloader

use:['isomorphic-style-loader', 'css-loader']

标签: react 后端 渲染

评论(1) 浏览(746)

webpack的代码分割配置代码,异步加载模块配置

2019-12-19 张宇童 webpack

需要在webpack.config.js配置中添加字段 optimization

首先在这里简单提一下

optimization 里面可以配置 tree shaking 

添加usedExports: true即可

下面我们进入正题

只需要在optimization里面添加配置

splitChunks: { chunks: 'all' }

即可 代码分割


配置异步加载

可以在函数里面直接import('xxxx')

$ sudo cnpm i -D babel-plugin-dynamic-import-webpack
options: {
   "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
    ],
    plugins: ['dynamic-import-webpack']
},



标签: javascript

评论(3) 浏览(1006)

webpack开启热更新模块

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

首先上代码

注意代码中的devServer

里面的hot、hotOnly都设置为true

拉下webpack的 HotModuleReplacementPlugin模块

然后实例化即可

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports ={
  mode: 'development',
  devServer: {
    hot: true,
    hotOnly: true,
    contentBase: path.resolve(__dirname, 'dist')
  },
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

标签: 配置 webpack

评论(0) 浏览(654)

file-loader的placeholder占位符中文文档

2019-12-11 张宇童 webpack

这篇文章是我对照着webpack官方文档一个一个翻译的,绝非右键翻译。保证同学们能看得懂


[ext] 表示 文件的后缀

[name] 表示 当前文件名

[path] 表示 相对于webpack的路径

[folder] 表示源文件所在文件夹路径

[emoji] 表示一个随机的emoji表情

[emoji:<length>]  表示 自定义随机表情的数量

[hash] 表示文件的hash值

[contenthash] 也是一个hash值只不过是内容hash 上一个是文件名hash


标签: 配置 webpack

评论(0) 浏览(627)

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) 浏览(435)

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

屏幕快照 2019-12-04 下午4.59.39.png

然后在模型中写一个方法effect

屏幕快照 2019-12-04 下午5.02.39.png

*_download({ id }, { call }) {
            return yield call(download, id)
        }
然后就可以直接下载保存了

屏幕快照 2019-12-04 下午5.03.43.png

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)

Powered by emlog