前端小白的成长之路 前端系列---项目搭建

💡 项目地址：games.git
🎮开始游戏：start

前言

这篇主要讲讲改造脚手架的思路

起手式

这里我用的 creat-react-app 建立项目
关于脚手架素质三连和一些脚手架的配置参数各位看官就能够自行 官网
只是按我之前的尿性就直接 eject，最近朋友推荐用 react-app-rewired

yarn add react–app–rewired ––dev

touch config-overridess.js
复制代码

这里暂时覆盖几个项目常会用的配置，等后面写项目或者项目优化须要再配置

开启代码压缩

config.plugins.push(
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|html|css|jsx)$/,
      threshold: 10240,
      minRatio: 0.8
    })
  )
复制代码

环境变量

实际开发中,确定有多套环境,dev/test/pro 作一些预制

config.plugins.push(
    new webpack.DefinePlugin({
      ...envConf
    })
  )
复制代码

config/env.js的配置以下

const dev_env = {
  'process.env.NODE_ENV': JSON.stringify('development')
}
const test_env = {
  'process.env.NODE_ENV': JSON.stringify('test')
}
const pro_env = {
  'process.env.NODE_ENV': JSON.stringify('production')
}
module.exports = process.env.DEV ? dev_env : process.env.TEST ? test_env : pro_env
复制代码

这里须要别的自定义环境变量也是能够的, 值得一提的是,这里的值须要 stringify 给到DefinePlugin
命令行中设置变量推荐cross-env

"scripts": {
    ...
    "build": "react-app-rewired build",
    "build:test": "cross-env TEST=true npm run build",
    ...
  },
复制代码

打包文件分析

打包文件分析也有蛮多插件这里推荐webpack-bundle-analyzer

if (process.env.ANALYZE) {
    config.plugins.push(new BundleAnalyzerPlugin())
  }
复制代码

"analyze": "cross-env ANALYZE=true npm run build"
复制代码

执行 analyze 的效果

后期作代码优化,能够考虑把体积大的依赖经过 cdn 引入,一般状况下 react 和 react-dom 还有一些 UI 框架的包会比较大,这里后期专门开代码优化专题再细讲了

持续集成

这个各公司应该都有相应的构建流程,我司目前经过 jenkins 构建 docker 镜像,rancher 进行容器发布和升级,相对来讲简单方便
笔者原本打算用 docker 方式构建,可是服务器是用的阿里云的 ECS,装 docker 环境有点问题,索性放弃了,等有时间再慢慢搞
参考Vue-CLI 3.x 自动部署项目至服务器的操做改造了一个简单的发布过程

1. 登陆

const promptList = [{
    type: 'username',
    message: 'Please enter your server account:',
    name: 'username',
    default: server.username
  }, {
    type: 'password',
    message: 'Please enter the server password:',
    name: 'password'
  }];
  inquirer.prompt(promptList).then(answers => {
    return {
      host: server.host,
      port: server.port,
      username: answers.username,
      password: answers.password
    }
  })
复制代码

由于会在不一样电脑开发,采用键入帐户方式, 用于链接服务器,也能够采用私钥的形式详见

2. 重启服务

const spinner = ora(`Publishing to server in progress...\n`)
  const Client = require('ssh2').Client
  const conn = new Client()
  scpClient.scp(
    './nginx.conf', {
      ...serverConf,
      path: `${server.nginxPath}/conf/nginx.conf`
    },
    err => {
      if (err) {
        console.log(chalk.red('\nReplace nginx.conf failed.\n'))
        throw err
      } else {
        console.log(chalk.green(`\nReplace nginx.conf success! \n`))
        conn
          .on('ready', () => {
            conn.exec(`rm -rf ${server.staticPath}\ncd ${server.nginxPath}/sbin \n./nginx -s reload`, (err, stream) => {
              if (err) throw err
              console.log(chalk.green(`reload nginx success! \n`))
              stream
                .on('close', (code, signal) => {
                  spinner.start()
                  if (updateFile) updateFile(serverConf, (err) => spinner.stop())
                  conn.end()
                })
                .on('data', data => {
                  console.log(`STDOUT: ${data}`)
                })
                .stderr.on('data', data => {
                  console.log(`STDERR: ${data}`)
                })
            })
          })
          .connect({
            ...serverConf
          })
      }
    }
  )
复制代码

开发过程当中,有可能会修改 nginx 配置,这里直接采用开发目录下nginx.conf进行替换,并重启 nginx,随便科普一下 nginx 一些经常使用到的配置

...
    gzip on;    // 开启gzip,前提是要打包出对应gz文件
    server {
        listen       80;
        server_name  localhost;
	    rewrite ^(.*)$  https://$host$1 permanent; // http重定向到https
	    ....
	  }
    server {
        listen       443 ssl;
        server_name  ${your domain};

        ssl_certificate      ~.crt;
        ssl_certificate_key  ~.key;         // ssl证书路径

        location /games/ {                  // 资源代理
            alias  /app/html/games/;
            index  index.html index.htm;
        }

    }
...
复制代码

这里值得一说的是若是你的项目不是直接根路径访问的,那打包出文件引用路径就须要插入对应的路径,对于creat脚手架只需在package.json中配置,

{
  ...
  "homepage": "${your domain}/games/"
  ...
}
复制代码

或者eject后直接修改config/webpack.config.prod.js中publicPath

3. 上传打包文件

scpClient.scp(
    './build', {
      ...serverConf,
      path: server.staticPath
    },
    err => {
      if (err) {
        console.log(chalk.red('deploy failed.\n'))
        throw err
      } else {
        console.log(chalk.green(`deploy success! Successfully released to production! \n`))
      }
      if (cb) cb(err)
    }
  )
复制代码

语法检查/代码美化

做为宇宙第三ide的vs,这些插件固然是基本操做啦!

根据须要在 tslint.json设置rules,须要保存时格式化代码,能够在 settings.json设置

"editor.formatOnSave": true,   // 保存是自动格式化
  "prettier.semi": false,        // 句尾分号
  "prettier.singleQuote": true,   // 单引号
  "prettier.printWidth": 120,   // 单行展现最长代码量
  "files.exclude": {        // 考虑设备性能,忽略一些不须要关注的文件
    "/node_modules": true,
    "/build": true
  },
复制代码

至此,咱们一个项目功能就搭建完了,你能够把它保存成模板,甚至构建出本身的脚手架传到npm上,参考仿 vue-cli 搭建属于本身的脚手架

one more thing

秉承着不装逼会死原则,总结出猿圈三大装逼指南

git commit emoji

咱们看看ant-design,骚!

这里贴一些经常使用的emoji,全文可参见 git-commit-emoji-cn

emoji	代码	说明
🎉 (庆祝)	:tada:	初次提交
🔖 (书签)	:bookmark:	发行/版本标签
🐛 (bug)	:bug:	修复 bug
🚑 (急救车)	:ambulance:	重要补丁
💄 (口红)	:lipstick:	更新 UI 和样式文件
⚡️ (闪电) 🐎 (赛马)	:zap: :racehorse:	提高性能
🚀 (火箭)	:rocket:	部署功能
🔨 (锤子)	:hammer:	重大重构
🎨 (调色板)	:art:	改进代码结构/代码格式
🔥 (火焰)	:fire:	移除代码或文件
✏️ (铅笔)	:pencil2:	修复 typo
👷 (工人)	:construction_worker:	添加 CI 构建系统

console ASCII Art

实例:

_____                           
 / ____|                          
| |  __  __ _ _ __ ___   ___  ___ 
| | |_ |/ _` | '_ ` _ \ / _ \/ __| | |__| | (_| | | | | | | __/\__ \ \_____|\__,_|_| |_| |_|\___||___/ 复制代码

我相信你再各类命令行工具看到相似的操做吧!

固然做为前端,咱们经常使用的固然是console.log,看看这里又有什么骚操做
百度:

console毕竟不属于js标准,主要是宿主环境的实现,咱们喜好的chrome和微信开发工具是支持控制台自定义样式的,ie/edge和node环境均不支持
上例

console.log("%c 百度2019校园招聘简历提交 %c http://dwz.cn/XpoFdepe %c （你将有机会直接得到面试资格）", "color:red","","color:red")
复制代码

除%c外,还支持一下占位符,具体就不一一展现了,你们能够本身玩玩

占位符	描述
%c	样式
o%,O%	对象
i%,d%	整数
f%	浮点

知乎:

这里安利几款在线生成字符画的工具

• network-science
• degraeve
• picascii

README shields

这些徽标分别来自:

• travis-ci持续集成服务
• codecov测试代码覆盖率
• codebeat代码质量管理
• shields纯用来生成自定义徽标
• gitter项目社交聊天服务
  这些项目目前都是开源的,而且可付费支持私有项目,固然徽标不是越多越好,主要反应你项目状况就好了!

骚年,看你骨骼清奇,这三部装逼秘籍,就送你了

占位符

前端小白的成长之路(序)