360前端星计划--前端工程化浅析

什么是前端工程化？

   目标，技术，原因

工程化的目标

  在前端领域，利用技术不断进步和经验逐步积累带来的各种方案，来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题。

前言

 

工程化里的技术

       工程化是一种思想，技术是一种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践行着工程化思想。思想的落地离不开行动和实践，技术虽然会过时，但是实践必须立足当下。

为什么前端要做工程化?

       历史原因是我们大多数人后知后觉，用一句大白话来说，前端工程化就是为了提效。这个提效体现在项目的开发、测试及维护阶段。

规范化、模块化、组件化、自动化

01 规范化，是项目可维护性的基石。

版本管理及开发流程规范

编写规范

-- 脚本

-- 样式

-- 目录结构

本章参考

https://git-scm.com/docs

https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html

https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow

https://danielkummer.github.io/git-flow-cheatsheet/

小建议

       安装git和git flow，参考文档，遵循git flow工作流模拟一次从开发到打Tag上线的全过程。

02 模块化

       我们一般逻辑相关的代码放在同一个文件中，当做一个模块。只需关注模块内逻辑的实现，无需考虑变量污染等问题，模块之间可互相调用。

(1) css模块化解决方案

核心思想：通过样式生效规则来避免冲突

02 css模块化解决方案

      为元素建立 shadow root，内部样式与外部样式完全隔离

(2) js模块化解决方案

03 组件化

        组件化和模块化的核心思想都在于分治，实际带来的好处就是团队协作效率和项目可维护性的提升。

什么是组件?

1.UI为主

  页面上的一个Ul块可以封装成一个组件。比如页面的头部，封装成一个Header组件后，我希望它的脚本、样式和模板可以放在一个文件夹中，到时候便于维护。

2.逻辑为主

  某一个功能逻辑也可以封装成一个组件。比如AutoComplete组件，封装成一个组件后，我希望它的脚本、样式和模板可以放在一个文件夹中，可以一处封装，多处任意使用。

在Web前端领域，我们可以将由特定逻辑和UI进行的高内聚，低耦合的封装体称为一个组件。

侧重UI进行封装的组件：代码结构清晰，组件内的模块就近放置，方便进行修改和维护。这种组件具备高内聚，低耦合的特性，但普适性不高。

侧重逻辑进行封装的组件：除了具备上述优点外，还具有很高的普适性，更方便组件重用。

组件内可以包含组件：比如偏UI的组件往往都是包含有逻辑的组件。

04 自动化

核心思想：能有机器自动完成的事情，绝不让人来做。自动化是前端工程化核心。

自动化初始化 eg. : vue - cli

自动化构建(打包) eg. : webpack

自动测试 eg. : karma, jest

自动部署 eg.: Jenkins

1.自动化测试

2.自动化部署

3 自动化初试化

4 自动化构建

为了实现上述的需求，开发了一个CLI，专门负责项目初始化和上线发布。配置了一个支持多项目打包的webpack工程，满足预编译的需求。配置了一个支持多项目打包的webpack工程，满足预编译的需求。开发了一个基于webpack4的插件，将静态资源上传至公司CDN。

写一个基于Node.js的CLI

写一个基于Node.js的CLI

如何捕获用户输入的是参数和命令，获得参数并触发回调?

const program = require('commander')
program.on('--help', _ => {})
program.command('init').action((name, options) => {})

如何触发询问与用户交互?

const inquirer = require('inquirer')
inquirer.prompt({
    type: 'confirm',
    name: 'name',
    message: '是否将产品发布至线上?',
    default: true
}).then(answer => {/*do sth*/})

如何帮我们执行命令? 如何帮我们发送HTTP请求？

const child_process = require('child_process')
const HTTP = require('http')

如何增强交互效果?

const chalk = require('chalk')
console.log(chalk.redBright('专题名称已被使用，请重新输入'))
const ora = require('ora')
const spinner = ora('正在加载中').start()
setTimeout(_ => {
    spinner.text = '加载完成'
    spinner.succeed()
}, 1000)

使用webpack4进行项目构建

module.exports = {
    mode: 'development',
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].js'
    },
    module: {
        rules: []
    },
    plugins: []
}

建议写法