? 项目地址：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 自动部署项目至服务器的操作改造了一个简单的发布过程
- 登录
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.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
- 上传打包文件
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.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项目社交聊天服务
这些项目目前都是开源的,并且可付费支持私有项目,当然徽标不是越多越好,主要反应你项目情况就行了!
骚年,看你骨骼清奇,这三部装逼秘籍,就送你了
占位符
一个前端小白的成长之路(序)