前端工程化

浮玉
596 阅读4分钟

什么是前端工程化？

  • 随着业务日益复杂和多元化，前端开发已不是从前的webPage模式，而是webApp模式，业务复杂了，就会产生一系列的问题，例如怎么进行多人团队的高效开发，怎么提高开发质量，如何提高可维护性？
  • 前端工程化是架构中重要的一个部分，用来解决上述的问题，从软件工程的角度来研究前端工程。

前端工程化的因素

模块化

模块化？

将一个大文件拆分成多个相互依赖的小文件，再进行统一拼装和加载，这样才能进行多人协同开发。

模块化规范分为哪几种？

JS模块化
  • 浏览器端的模块化规范：AMD，CMD
  • 服务器端的模块化规范：CommonJS规范
  • ES6模块化规范 1.如何默认导入/导出？

使用 export default { 成员名... }进行默认导出

使用 import 接收名称 from "模块标识符" 进行默认导入

2、如何按需导入/导出？

export let num = 999; 按需导出某个成员

import { num } from "./test.js"；按需导入其他模块的成员

3、如何直接导入并执行js代码？

import "./test.js";

css模块化
  • 虽然Sass、Less、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：选择器的全局污染问题。按道理，一个模块化的文件应该要隐藏内部作用域，只暴露少量接口给使用者。而按照目前预处理器的方式，导入一个CSS模块后，已存在的样式有被覆盖的风险。虽然重写样式是CSS的一个优势，但这并不利于多人协作。
  • 所以制定了一些css命名风格
  1. BEM风格
  2. Bootstrap风格
  3. Semantic UI风格 从工具层面，社区又创造出Shadow DOM、CSS in JS和CSS Modules三种解决方案。
  • Shadow DOM是WebComponents的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远
  • CSS in JS是彻底抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，而且处理伪类等问题比较困难
  • CSS Modules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scoped style也算是一种
资源模块化

资源模块化后，有三个好处：

  • 依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题
  • 资源处理集成化。现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等。
  • 项目结构清晰化。

组件化

  • 分治思想，拆分
  • 复用

规范化

  • 约束一些好的习惯 1.目录结构的制定 2.编码规范 3.前后端接口规范 4.文档规范 5.组件管理 6.Git分支管理 7.Commit描述规范 8.定期CodeReview 9.视觉图标规范...

自动化

重复的交给自动化工具

webpack的使用

如何安装webpack？

npm install --save-dev webpack

因为是webpack4.0+版本，所以还需要安装webpack-cli。

npm install --save-dev webpack-cli

全局安装：

npm install --global webpack

如何配置webpack打包的入口和出口

var path = require('path');

module.exports = {
  mode: 'development', //模式生产者是production
  entry: './foo.js', //入口
  output: { //出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

使用loader加载css文件等

你可以使用 loader 告诉 webpack 加载 CSS 文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

配置webpack的自动打包功能

配置html-webpack-plugin并生成预览页面

  • 安装 html-webpack-plugin
npm install --save-dev html-webpack-plugin

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      main: "./src/script/main.js",
	  a: "./src/script/a.js"
    },
plugins: [
  new HtmlWebpackPlugin({
   title: 'Output Management'
    })
 ],
    output: {
      filename: "[name]-[hash].bundle.js",
      path: path.resolve(__dirname, 'dist')
    }
  };

热加载

安装webpack dev sever:

npm install webpack-dev-server --g

运行webpack-dev-server 得到服务端localhost:8888，默认路径为./dist，打开dist里的app.html或者module.js,然后更改src里的文件，保存后会自动更新打包并加载新页面

module.exports = {
...
   devServer: {
       contentBase: path.resolve(__dirname, './dist'),
       host: 'localhost',
       compress: true,
       port: 8888,
       historyApiFallback: true,
   }
...
}
avatar
文章
阅读
粉丝