前端工程化：介绍各种和前端工程化相关的工具和实践，包括自动化测试，持续集成与部署，模块化，组件化，规范化等

前端工程化涵盖了一系列的工具和开发实践，目的是提高开发效率，确保质量，以及统一开发规范等。

以下是一些前端工程化中常见的工具和实践：

自动化测试： 这包括单元测试、集成测试和端到端测试。工具如 Jest, Mocha, Jasmine, Karma, Cypress等可以帮助我们完成自动化测试。
持续集成与部署（Continuous Integration and Deployment）： 这是持续的将代码集成到共享仓库，然后运行自动化的构建和测试。部署则是自动化地将应用发布到生产环境。Jenkins, Travis CI, CircleCI 以及GitHub Actions等可以帮助我们实现持续集成和部署。
模块化与组件化： 模块化是将代码按功能分解为可重复使用的模块，而组件化则是将界面分解为可以重复使用的组件。这样可以提高代码的可读性，重用性和维护性。工具如Webpack, Browserify, Rollup等都可以帮助我们处理模块化。而React, Vue, Angular等框架则提供了优秀的组件化方案。
规范化（linting）： 代码规范是提高代码质量的一个重要步骤，包括代码风格、编码规范以及最佳实践等。工具如ESLint, TSLint, Prettier等可以帮助我们实现自动化的代码规范检查和修复。

自动化测试(Jest测试框架示例)

// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});

在终端里运行 jest 或 npm test 来执行测试。

持续集成与部署(GitHub Actions示例)

.github/workflows/main.yml

name: Node.js CI

on: [push]

jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v1
with:
node-version: '12'
- name: npm install and test
run: |
npm install
npm test
env:
CI: true

这是一个简单的GitHub Actions配置，它在每次push时运行测试。

模块化(ES6模块示例)

// file1.js
export const name = 'Duang';

// file2.js
import { name } from './file1.js';
console.log(name); // 输出 'Duang'

这是使用了ES6模块的示例。

规范化(ESLint示例)
创建 .eslintrc.js 文件：

module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
rules: {
'indent': ['error', 2],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always'],
},
};

然后在命令行执行 eslint yourfile.js 来检查 yourfile.js 文件的代码风格。

.github/workflows/main.yml