前端項目編譯
1. 編譯器前端開發
編譯器粗略分為詞法分析，語法分析，類型檢查，中間代碼生成，代碼優化，目標代碼生成，目標代碼優化。把中間代碼生成及之前階段劃分問編譯器的前端，那麼後端與前端是獨立的。後端只需要一種中間代碼表示，可以是三地址代碼或四元式等，而這些都與前端生成的方式無關。也就是不論你前端是用fortran還是c/c++,只要生成了中間代碼表示就可以了，後端是不管你是用哪種語言生成的。
2. gitLab CI/CD docker自動部署vue前端項目
查詢了好多資料，都沒有找到可以直接應用的，綜合了好多，配置runner之後，前端項目裡面需要在項目根目錄配置三個文件：
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 設置緩存
cache:
paths:
- node_moles/
- dist/
# 安裝依賴 before_script 會在每個 stages 執行之前運行
before_script:
- npm install
# 編譯 這里對應上方 stages ，
build:
stage: build
script:# script 為要執行的命令，可以多條按順序執行
- npm run build:prod
docker-deploy:
stage: deploy
# 執行Job內容
script:
# 通過Dockerfile生成pactera_pflife_ui鏡像
- sudo docker build -t pactera_pflife_ui .
# 刪除已經在運行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通過鏡像啟動容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 執行Job的伺服器
- pflife-web
only:
# 只有在master分支才會執行
- dev_xht
2.Dockerfile 文件
# 設置基礎鏡像
FROM nginx:latest
# 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置來替換nginx鏡像里的默認配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改為docker服務宿主機的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
總之，三個文件部署之後運行正常
3. 前端通過gulp編譯後的文件，怎麼部署到伺服器
伺服器上寫部署腳本，從代碼庫里拉項目代碼，跑gulp自動化。或者打包傳給後端讓他搞。
4. angular打包後在其他前端項目中引用
前言：突發奇想，angular打包後是編譯成HTML和js文件的，那我在其他的項目中，是否能使用angular做的一些組件功能呢？
1.ng build打包後dist文件，裡面除了一個root標簽，就是一些js引用。這里涉及到他的一些底層的編譯。因為他最後編譯後，都是會編譯成HTML和js文件。
2.模仿引入他的js文件。新建一個HTML，將上述打包好的js文件引入，注意，需要引入base這個標簽和root這個標簽
5. 什麼是編譯程序的前端
編譯程序的前端通常指：詞法分析、語法分析、語義分析等生成最終代碼以前的一系列步驟
6. 前端開發常用哪些工具軟體
前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：
1、WebStorm
幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。
2、IntelliJ idea
頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。
2、HBuilderX
HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。