6.前端工程化笔记

本文为拉勾网大前端高薪训练营第一期笔记

---

自动化步骤

• 创建项目
• 编码
  • 格式化代码
  • 校验代码风格
  • 编译/构建/打包
• 预览/测试
  • Web Server/Mock
  • Live Reloading/HMR
  • Source Map
• 提交
  • Git Hooks
  • Lint-staged
  • 持续集成
• 部署
  • CI/CD
  • 自动发布

5个维度讲解前端工程化

• 脚手架工具开发
• 自动化构建系统
• 模块化打包
• 项目代码规范化
• 自动化部署

常见创建脚手架

create-react-app

vue-cli

angular-cli

yeoman

Install yeoman

yarn global add yo
yarn global add generator-node

mkdir my-module
cd my-module
yo node //generator-node

//sub generator:
//node:boilerplate
//node:cli
//node:editorconfig
//node:eslint
//node:git
//node:readme

yo node:cli //sub generator
yarn
yarn link / npm link

my-module --help
**// yarn link permission denied
// use npm instead or chmod +x a.js**

Yeoman使用步骤

1. 明确需求
2. 找到合适的generator
3. 全局范围安装generator
4. yo运行对应的generator
5. 通过命令行交互填写选项
6. 生成所需要的项目结构

加速c++库的npm镜像

#mirror config
sharp_dist_base_url = https://npm.taobao.org/mirrors/sharp-libvips/v8.9.1/
profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/
fse_binary_host_mirror = https://npm.taobao.org/mirrors/fsevents
node_splite3_binary_host_mirror = https://npm.taobao.org/mirrors
splite3_binary_host_mirror = https://npm.taobao.org/mirrors
splite3_binary_site = https://npm.taobao.org/mirrors/sqlite3
sass_binary_site = https://npm.taobao.org/mirrors/node-sass
electron_mirror = https://npm.taobao.org/mirrors/electron/
puppeteer_download_host = https://npm.taobao.org/mirrors
chromedriver_cdnurl = https://npm.taobao.org/mirrors/chromedriver
operadriver_cdnurl = https://npm.taobao.org/mirrors/operadriver
phantomjs_cdnurl = https://npm.taobao.org/mirrors/phantomjs
python_mirror = https://npm.taobao.org/mirrors/python
registry = https://registry.npm.taobao.org
disturl = https://npm.taobao.org/dist

npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/v8.9.1/
or
modify /Users//.npmrc

创建自己的generator

mkdir generator-sample
cd generator-sample
yarn init
yarn add yeoman-generator

generators/
	app/
		templates/
		index.js
package.json

用this.fs.write或者用模板

ejs模板标记如果想原封不动输出的话，多加一个%在前一个%后

<%%= BASE_URL %>

发布generator

echo node_modules > .gitignore

如果是taobao npm registry的话需要改回yarn，因为taobao的是只读的

yarn publish —registry=https://registry.yarnpkg.com

小型脚手架Plop

yarn add plop --dev
vi plopfile.js
//具体看代码

可以一个命令生成一批按模板生成的文件，方便批量增加模块

脚手架scaffolding原理

package.json里增加"bin": “cli.js”,

cli.js里需要首行文件头 #!/usr/bin/env node

macos下还需要chmod 755 cli.js

inquirer用来拿到input

ejs作为模板引擎

自动化构建初体验

npm scripts

"scripts":{
	"build": "sass scss/main.scss css/styles.css --watch",
	"preserve": "yarn build",
	"serve": "browser-sync . --files \"css/*.css"\",
	"start": "run-p build serve"
}

yarn add browser-sync npm-run-all --dev

自动化构建工具

• grunt：基于临时文件，会有大量文件读写
• gulp：基于内存
• fis：百度做的自动化构建工具，很多预设方案

Grunt异步任务

gruntfile.js

const done = this.async()

然后在异步任务结束后done()

任务失败在function里return false，如果是异步任务就done(false)

这个任务失败的后续的任务就不会执行，除非加了—force

grunt支持config，grunt.initConfig({foo:{bar: 123}})

使用时grunt.config(‘foo.bar’)

grunt子任务

grunt.initConfig({
    build: {
			options: {foo: 'bar'}
      foo: {
				options: {foo: 'bar1'}
			},
      bar: '456'
    }
  })

  grunt.registerMultiTask('build', function () {
		console.log(this.options())
    console.log(`task: build, target: ${this.target}, data: ${this.data}`)
  })

使用插件

grunt.initConfig({
	clean: {
		temp:  'temp/**'
	}
})

grunt.loadNpmTasks('grunt-contrib-clean')

grunt.initConfig({
    sass: {
      options: {
        sourceMap: true,
        implementation: sass
      },
      main: {
        files: {
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      main: {
        files: {
          'dist/js/app.js': 'src/js/app.js'
        }
      }
    },
    watch: {
      js: {
        files: ['src/js/*.js'],
        tasks: ['babel']
      },
      css: {
        files: ['src/scss/*.scss'],
        tasks: ['sass']
      }
    }
  })

  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务

  grunt.registerTask('default', ['sass', 'babel', 'watch'])

用load-grunt-tasks节省一个个load task

gulp

4.0之后可以用exports.default = done ⇒ {console.log(‘123’); done()}的方式定义任务

4.0之前需要const gulp = require(‘gulp’) gulp.task(‘default’, done ⇒ {console.log(‘123’); done()})

const {series, parallel} = require('gulp')

支持promise async stream几种模式

gulp是pipe的方式，方便管道多步加工

插件列表

gulp-clean-css 压缩css

gulp-rename 重命名后缀

gulp-sass sass转css

gulp-babel js新语法转es5

gulp-imagemin 压缩图片

gulp-htmlmin 压缩html，想去换行符,压缩内嵌css,js，{collapseWhitespace: true, minifyCSS: true,minifyJS: true}，还可以去注释，去空属性

gulp-uglify 压缩js

gulp-if 判断pipe里的文件，第一个参数是正则，第二个是执行的转换流

gulp-load-plugins自动加载所有gulp plugins

sass({outputStyle: ‘expanded’})

src时候加第二个参数{base:‘src’}能保持src以后的目录结构

babel的时候需要安装gulp-babel @babel/core @babel/preset-env

babel({presets: [’@babel/preset-env’]})

src如果是目录和所有子目录下的文件，通配符src/**/*.html

通配所有文件是src/images/**

del([‘dist’])

注意gulp-sass-aaa的话会变成sassAaa驼峰式命名，而且用的时候

const loadPlugins = require(‘gulp-load-plugins’)

const plugins = loadPlugins()

plugins.sass

browser-sync

const browserSync = require('browser-sync')
const bs = browserSync.create()
bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: 'dist/**',
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
})

swig会缓存页面，可以把cache设置false

gulp-useref来打包文件，把所有引用注释包括的文件都打包到指定文件里

同时读写同一个文件夹可能会导致文件写入失败，所以build的时候读dist写release

工程中把gulp的常用任务放在package.json的scripts里

老师自己的脚手架工具

yarn global add zce-cli

zce init nm zce-pages

在脚手架的lib/index.js里可以通过

const cwd = process.cwd()获得项目执行目录

try {
	config = require(path.join(cwd, '/pages.config.js'))
} catch(e) {}

把gulpfile包在另一个项目里，通过yarn link来导入

yarn gulp build --gulpfile ./node_modules/zce-pages/lib/index.js --cwd .

process.argv获得node执行时的参数

require.resolve(’…’)获得文件，因为这个上一层有package.json，会自动找package里main字段的js

做一个项目包起来gulp cli，这样连gulp都不用接触，就可以完成gulp任务，输入的路径参数都内置

npm publish的时候会把package.json files里的东西带上

如果在国内taobao镜像可能会有同步时间差，可以手动sync，npm.taobao.com

老师封装的 github.com/zce/x-pages

;((window, document) => {
  document.querySelector('#btn').addEventListener('click', () => {
    alert(Date.now())
  })
})(window, document)

小知识点，如果window document这样写，好处一个是可以减少往上层找变量，能加快运行，另一个是uglify的时候会把window和document都压缩

---

本文为拉勾网大前端高薪训练营第一期笔记