前端工程化實(shí)現(xiàn)
本文主要通過4個(gè)點(diǎn)來講述現(xiàn)在前端的工作開發(fā)流程
- css加前綴
- js語法檢查
- 壓縮
- ES6 => ES5
CSS自動(dòng)加前綴
我們一般使用autoprefixer來給我們寫的css自動(dòng)添加前綴俗冻，來配合不同瀏覽器的區(qū)別向拆。
aotoprefixer官網(wǎng) 介紹了它是postcss的一個(gè)插件，所以我們可以通過postcss來使用autoprefixer來自動(dòng)添加前綴。postcss官網(wǎng)鏈接 介紹了怎么使用autoprefixer
npm run/cli
To use PostCSS from your command-line interface or with npm scripts there is postcss-cli.
postcss --use autoprefixer -c options.json -o main.css css/*.css
意思：
- 使用配置文件為options.json -
c opitons.json - 輸出的文件為main.css
-o main.css,如果有多個(gè)輸入文件需要使用--dir/--replace - 配置文件為css文件夾下面的所有css文件
css/*.css - 通過全局安裝postcss，然后使用它的內(nèi)部插件
autoprefixer--use autoprefixer
1.全局安裝postcss-cli
npm install -g postcss-cli
// 一般文件-cli就是命令行安裝
2. 打開命令行，切換到對應(yīng)的目錄，使用postcss來添加前綴
// 把src下面的所有的css打包dist文件夾下面
postcss --use autoprefixer --dir dist src/*.css
// 把src下面的所有css都打包到output文件夾下面并監(jiān)聽它的改變，動(dòng)態(tài)的編譯生產(chǎn)徒爹。
postcss --use autoprefixer --dir output src/*.css --watch
js語法檢查
現(xiàn)在分別有三種可以來檢查語法的插件。 jshint jslint eslint 流行的現(xiàn)在是eslint
1. 全局安裝eslint
npm install -g eslint
2. 如果沒有配置文件直接檢查
eslint src/event.js
eslint.png
看見命令行提示我們需要使用eslint --init 進(jìn)行初始化
eslint --init
會(huì)在目錄下面創(chuàng)建一個(gè)eslintrc.js, 根據(jù)這個(gè)配置我們來檢查自己的js芋类，安裝期間出現(xiàn)了一個(gè)問題
3. 開始配置
在配置文件里指定環(huán)境隆嗅，使用 env，指定你想啟用的環(huán)境侯繁，設(shè)置它們?yōu)?true胖喳。例如，以下示例啟用了 browser 和 Node.js 的環(huán)境：
{
"env": {
"browser": true,
"node": true
}
}
// .eslintrc.js
module.exports = {
"extends": "standard",
"env": {
"browser": true,
"node": true
},
rules: {
'space-before-function-paren': 'off',
"no-compare-neg-zero": "off",
"no-useless-escape": "off",
"indent": "off",
"semi": "off",
"space-before-blocks" : 'off',
"space-infix-ops": "off",
"no-trailing-spaces": "off"
}
};
文件壓縮uglifyjs
1. 全局安裝
npm install -g uglify-js
2. 使用
uglifyjs --compress --mangle -- input.js
uglifyjs.png
總結(jié) 發(fā)現(xiàn)它并不兼容es6的語法贮竟，所以我們需要先把es6轉(zhuǎn)換成es5
ES6轉(zhuǎn)換成ES5
1.全局安裝
npm install -g babel-cli
// 檢查是否安裝成功
which babel
2. 創(chuàng)建一個(gè).babelrc
touch .babelrc
3. 局部安裝babel-preset-env
npm install -D babel-preset-env
4. 開始使用轉(zhuǎn)換
// z轉(zhuǎn)換src下面的a.js
babel src/a.js
// 把轉(zhuǎn)換后的代碼放到dist下面的a.js
babel src/a.js > dist/a.js
// 轉(zhuǎn)換并壓縮 把前面的輸出內(nèi)容當(dāng)做后面的輸入內(nèi)容
babel src/a.js | uglifyjs
// 轉(zhuǎn)換壓縮并生成文件
babel src/a.js | uglifyjs > dist/a.js
// 把src下面所有的js分別轉(zhuǎn)換到dist目錄下
babel src --out-dir dist
// 把src的所有js集合打包到dist下面的index.js
babel src --out-file dist/index.js
管道轉(zhuǎn)換并壓縮.png
總結(jié)全部命令行
// 刪除之前打包的丽焊，并全部執(zhí)行
rm -rf dist/*; postcss --use autoprefixer --dir dist/ src/*.css; eslint src/*.js && babel src/a.js | uglifyjs > dist/a.js; echo "success"
// windows可以需要這樣啟動(dòng)eslint
rm -rf dist/*; postcss --use autoprefixer --dir dist/ src/*.css; node_modules/.bin/eslint src/*.js && babel src/a.js | uglifyjs > dist/a.js; echo "success"
