Xigua_front NPM

xigua_front

基于react、react-dom、react-router-dom以及ant，借助webpack3+的前端项目

# Install

$ npm install

# Usage

开启本地服务
$ npm start
执行dll
$ npm run dll    // 需要使用时，运行该命令，否则直接运行下面的命令
打包项目
$ npm run build

# config.js

项目的相关配置在根目录下面的config.js

IS_DLL: 是否使用DllPlugin抽离出第三方库，让后续打包不在处理相关的依赖库，默认是false

IS_DLL: false

DLL_DATA: 需要通过DllPlugin抽离的具体第三方库，提高构建速度。默认添加react、react-dom、react-router-dom。只有IS_DLL为true的时候，该配置才有效。

DLL_DATA: {
	vendor_01: ['react', 'react-dom', 'react-router-dom']
}

注意：由于DllPlugin暂不支持拆分，因此合理添加第三方库，否则会产生很大的依赖包。

ASSERT_DIRECTORY: 打包输出目录，默认为dist

ASSERT_DIRECTORY: 'dist'

PUBLIC_PATH: 打包的公共路径，html文件依赖脚本和css的路径，默认是/。当需要将静态资源部署到CDN上面的时候，将路径部署为CDN的绝对路径

PUBLIC_PATH: '/'

REQUIRE_LOAD: 按需加载配置。默认按照antd配置，详情参考 antd按需加载。如果需要使用其它的UI组件，参考官方提供的babel plugin。默认是用的是

[
  'import',
    {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    }
]

-PROXY: 配置代理。有两种形式：配置nginx，浏览器输入地址http://127.0.0.1:3001

server {
    listen 3001;
    server_name 127.0.0.1;
    gzip on;
    gzip_min_length 100k;
    gzip_comp_level 5;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
    location /admin {
        proxy_pass https://www.xiguacity.cn/admin;
    }
    location / {
        proxy_pass http://127.0.0.1:3000/;
    }
}

配置PROXY，浏览器输入地址http://127.0.0.1:3000

PROXY: {
    '/admin': {
        target: 'https://www.xiguacity.cn',
        changeOrigin: true,
        secure: false
    }
}

PORT: 本地服务的端口号，默认是3000

PORT: 3000

HTTPS: 是否开启HTTPS，默认是false

HTTPS: false

OPEN: 是否打开浏览器，默认是true

OPEN: true

-GZIP: 是否开启gzip，默认是true

GZIP: true

# docker

为了验证生产最真实的环境，可以在本地构建docker运行一遍，然后上线。

$ docker build -t xigua_front .
$ docker run --name xigua_front -p 3003:3003 -d xigua_front

在浏览器里面打开http://127.0.0.1:3003

# 部署

目前采用本地打包，通过从本地部署到远程服务器，例子如下：

scp -P 8822 -r ~/Documents/xigua_front/dist/  deploy@39.107.53.169:~/front/xigua_front