前端小白的成長之路 前端系列---項目搭建

💡 項目地址：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項目社交聊天服務
  這些項目目前都是開源的,而且可付費支持私有項目,固然徽標不是越多越好,主要反應你項目狀況就好了!

騷年,看你骨骼清奇,這三部裝逼祕籍,就送你了

佔位符

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