? 项目地址：
?开始游戏：前言
这篇主要讲讲改造脚手架的思路
起手式
这里我用的 creat-react-app 创建项目
关于脚手架素质三连和一些脚手架的配置参数各位看官就可以自行 只是按我以前的尿性就直接 eject，最近朋友推荐用yarn add react–app–rewired ––devtouch 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 }) )复制代码 的配置如下
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 给到
命令行中设置变量推荐"scripts": { ... "build": "react-app-rewired build", "build:test": "cross-env TEST=true npm run build", ... },复制代码 打包文件分析
打包文件分析也有蛮多插件这里推荐
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 环境有点问题,索性放弃了,等有时间再慢慢搞 参考的操作改造了一个简单的发布过程- 登录
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 } })复制代码 因为会在不同电脑开发,采用键入账户方式, 用于连接服务器,也可以采用私钥的形式
- 重启服务
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,随便科普一下 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脚手架只需在中配置,
{ ... "homepage": "${your domain}/games/" ...}复制代码 或者eject后直接修改config/webpack.config.prod.js中publicPath
- 上传打包文件
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,这些插件当然是基本操作啦!
"editor.formatOnSave": true, // 保存是自动格式化 "prettier.semi": false, // 句尾分号 "prettier.singleQuote": true, // 单引号 "prettier.printWidth": 120, // 单行展示最长代码量 "files.exclude": { // 考虑设备性能,忽略一些不需要关注的文件 "/node_modules": true, "/build": true },复制代码 至此,我们一个项目功能就搭建完了,你可以把它保存成模板,甚至构建出自己的脚手架传到npm上,参考
one more thing
秉承着不装逼会死原则,总结出猿圈三大装逼指南
git commit emoji
我们看看,骚!
| 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.log("%c 百度2019校园招聘简历提交 %c http://dwz.cn/XpoFdepe %c （你将有机会直接获得面试资格）", "color:red","","color:red")复制代码 除%c外,还支持一下占位符,具体就不一一展示了,大家可以自己玩玩
| 占位符 | 描述 |
|---|---|
| %c | 样式 |
| o%,O% | 对象 |
| i%,d% | 整数 |
| f% | 浮点 |
知乎:
README shields
- 持续集成服务
- 测试代码覆盖率
- 代码质量管理
- 纯用来生成自定义徽标
- 项目社交聊天服务 这些项目目前都是开源的,并且可付费支持私有项目,当然徽标不是越多越好,主要反应你项目情况就行了!
骚年,看你骨骼清奇,这三部装逼秘籍,就送你了