Front-end engineering study notes 4

Front-end engineering

What is front-end engineering?

Front-end engineering refers to the standardization, standardization, 开发流程，技术选型，代码规范，构建发布etc. of the front-end development process to improve the development efficiency and code quality of front-end engineers.

Why front-end engineering?

• High complexity: multi-function, multi-page, multi-state, multi-system for front-end projects
• Large scale: team development, multi-person collaboration, code quality management
• High requirements: page performance optimization (CDN/asynchronous loading/request merge), CSS compatibility, single page application, server-side rendering. . .

How to achieve front-end engineering?

• 
  Start from the business Simple single-page application, use gulp packaging + synchronization tool to achieve the entire development process
• From the perspective of complexity, the
  jenkenis git/gitlab webpack React/Vue/Angular
  framework should ultimately serve our project, rather than exhausting to maintain the framework
• Expanding from the known to the unknown.
  Different technologies have different adaptation points. Choosing the right one is the best

Build tools: Webpack & gulp

Webpack

https://webpack.js.org/

Core concepts: entry, output, Loader (used to convert certain types of modules), plug-ins (wider than Loader), mode/compatibility (babel-polyfill)

Webpack Chinese document: https://webpack.docschina.org/concepts/

Two ways to use Webpack: the
first

• ./node_modules/.bin/webpack --version Print out the webpack version number
• npx webpack --version After npm5, there is this instruction
• npx create-react-app my-app Quickly create a react project

The second: install webpack globally

• npm install webpack -g

to sum up:

• Initialize the project
  npm init -yquickly create a nodejs project
• nvm, node, npm environment confirmation
  nvm install/use v10.16.0 node -v npm -v
• Two webpack installations and three usage methods
  npm install -g/-D webpack webpack-cli
npx webpack&./node_modules/.bin/webpack&npm run

Inlet and Outlet

• Keywords entry, output
  webpack configuration file webpack.config.js
• Node path related: the use of the Path module is
  introduced using require, and webstorm configures node core
• The path in Output needs to use absolute path
  path.join to splice paths, Nodejs global variable __dirname

loader plugins

to sum up:

• Loaders, plugins
  test to match files, loader reverse order loading pipeline processing
• The use of plugin, hot module replacement
  , the dependency of installing plugin, new plugin in plugins attribute
• webpack-dev-server
  references the HMR plug-in and automatically refreshes the page when js is modified

babel

https://www.babeljs.cn/

Webpack application summary

• Core concepts:
  entry, output, loader, plug-in, mode
• In development and production mode, configure on demand
  , use hot update in development, and use compression plug-in in production mode
• 
  Babel configuration configuration file, polyfile

gulp

https://gulpjs.com/docs/en/getting-started/quick-start

• Easy to use
• Fast build
• Plug-in system
• Easy to learn
  

browserSync

gulp summary

• Basic configuration
  Configuration tasks, compress code, process css/img
• Hot refresh browsersync
  high-efficiency development, real-time web page refresh

Yoeman

https://yeoman.io/

Yeoman scaffolding summary

• Global yo command installation, installation command yo <package>
  The name of the scaffold is generator-beginning, such as: yo brian-imooc
• Use generator-generator to quickly create scaffolding generation projects
  Global installationnpm install -g generator-generator
• Use npm for
  local testing of the release link command, set during releasenpm registry