前端工程化学习

---

title: 前端工程化
tags: gulp
notebook: 学习笔记

2022年3月19日

1. 对文件进行自动化操作使用gulp

   1. 全局安装gulp : npm i gulp -g
   2. 初始化项目：npm init --yes
   3. 开发者模式安装gulp ： npm i gulp -D
   4. 建立gulpfile.js文件：在项目中建立gulpfile.js文件
   5. 在gulpfile.js文件中写自动化代码

2. 在gulpfile文件中写自动化代码

   1. 先通过require引入gulp
   2. 在gulpjs.com网站找到需要使用的gulp插件
   3. 通过插件说明在相关项目中安装相关插件
      1. 压缩插件使用的是npm i gulp-clean-css --save-dev;转化less文件使用的是npm i gulp-less -D……
      2. 需要在项目中引用通过require引入插件var { src, dest } = require("gulp");
   4. 创建一个函数：test = ()=>{}；在函数返回 return gulp.src(“目标文件位置”).pipe(less/引用gulp-less时定所赋值的变量/(/使用less进行转化/)).pipe(miniclean(/引入gulp-clean-css时所赋值的变量/)).pipe(dest(“需要操作到的文件位置”))
      var dest1 = () => {
return (
src("src/style/min.less")
.pipe(lesscss())
.pipe(autopre())
.pipe(minicss())
.pipe(dest("dist"))
);
};
   5. 如果想在操作文件位置将所有的文件目录样式一起传进来可以在src的第二个参数传入{base:“需要的目录样式目录名”}
   6. 通过module.exports={}进行抛出

3. 

---

2022年3月20日

1. 对css代码进行游览器兼容性处理，可以使用gulp中的autoprefixer插件进行兼容性处理

   1. 先在项目中安装autoprefixe：npm i gulp-autoprefixer -D
   2. 在项目中的gulpfile.js文件中引入autoprefixer：const autopre = require(“gulp-autoprefixer”)
   3. 在项目中使用autopre变量添加：pipe(autopre());
2. 自动化将ES6的代码文件转化成ES5需要使用gulp中的gulp-babel插件
   1. 需要先到gulp官网中查找插件，选择相应的版本在项目中进行安装
   2. 在通过require引入到gulpfile.js文件中const babel = require("gulp-babel");
   3. 在代码中插入官网中的转化代码.pipe(babel({presets: ["babel-preset-env* 如果项目中安装的是gulp-babel6的插件需要换成这个，如果是7就不用换*"]}))
3. 在js中使用压缩插件可以在项目中安装gulp-uglify插件进行压缩
4. 使用gulp插件对html文件进行操作
   1. 在项目中安装gulp-htmlmin插件，在gulp官网中查找插件并查看用法
   2. 在项目中通过require引入到文件中
   3. 在代码中插入转化代码.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))其中true表示开启相关压缩
5. 在gulpfile.js用并行执行操作自动化插件
   1. 在项目中引用并行函数parallel:const { src, dest ,parallel} = require("gulp");
   2. 在文件结尾进行并行操作const bulid = parallel(dest1,script,html);
   3. 在使用module.export = {bulie},最后在终端输出即可

2022 年 3 月 23 日

1. 建立 browser-sync 服务器

   1. 在项目中安装 browser-sync 服务器：npm i browser-sync -D
   2. 在项目中通过 require 引用 browser-sync：const browserSync = require("browser-sync");const bs = browserSync.create();
   3. 建立一个转化码

   bs.init({
    server:{
      baseDir:"./image"
    }
   })
   

2. [外链图片转存中…(img-zcfY7j0s-1648221123786)]

模块化

2022 年 3 月 24 日

1. ES modules 的相关特性
   1. ES modules 使用的是严格模式，忽略了"use strict"
   2. 每个 ES modules 模块都是单独私有的作用域
   3. ESM 是通过 cors 去请求外部的 JS 模块
   4. ESM 的 script 会延迟执行脚本
2. 使用 browser-sync 启动本地实时更新服务器：使用browser-sync --files **/*.js实时监控 js 文件变化
3. module 使用方法
   1. 通过 import 进行导入成员，通过 export 进行导出成员

   //./ba.js中的代码
      export var name = "module的用法";
   //.cs.js中的代码
      import {name} from "./ba.js"
      console.log(name);
   

   2. 通过as进行导出重命名，当导出文件使用了as重命名后，导入文件要用重命名后的文件名export name as mode导入文件要使用mode名import {mode} from "./ba.js"
   3. 若果导出名用了defaule,这个值就作为当前文件默认导出的成员，导入此成员的时候可以用as重命名在使用import {default as name} "./ba.js" //默认成员名使用时用那么
4. ES Module 中import导入函数主义事项
   1. 其中export {}中导出的是固定格式而不是对象字面量
   2. import导入中from后面必须跟的是导出文件名，而不想conmmand.js一样对.js进行省略
   3. 如果import想直接获导出的所有属性值可以用*接收所有导出的属性值import * as ade from "./ba.js"
   4. 想要导出所有属性值还有一种写法import("./n=ba.js").then(funciton(module){console.log(module)};
   5. 如果同时导出具名成员和默认成员可以是import title , {name , age} from "./ba.js"逗号左边的是默认成员，逗号右边的是具名成员
5. 如果要将导入的文件作为成员直接导出可以使用exprot直接导出export("./n=ba.js").then(funciton(module){console.log(module)}，但这样导出自己的作用域就无法使用,使用场景是如果项目中有很多组件可以将它写在一个文件中直接用export导出，这样在项目中引用组件就不用一条一条的导入，可以直接导入此文件的内容
6. ES Module属于2014年新添加的属性，有一部分浏览器是不支持的，若想要支持可以在script中引入module-loder,但是在支持module的游览器会运行两边，这时可以使用script标签中的nomodule进行解决，但这个属性只适合在开发中使用因为效率慢
   [外链图片转存中…(img-OczIXkSt-1648221123787)]

2022 年 3 月 26 日

1. webpack 官网：webpack 官网
2. webpack 是基于 node.js 的
3. webpack 通过 npm 安装，它提供了两个包：
   • webpack：核心包，包含了 webpack 构建过程中要用到的所有 api
   • webpack-cli：提供了一个简单的 cli 命令，它调用了 webpack 核心包的 api，用来完成构建过程
4. webpack 安装步骤：
   1. 初始化项目 npm init
   2. 对 webpack 进行本地安装npm i -D webpack webpack-cli

---

2022 年 3 月 27 日

1. 使用 webpack
   • webpack 安装完成后开发阶段的代码放入 src 文件夹下
   • 通过在命令行中使用命令 npx webpack将开发阶段的代码转入到文件夹 dist 文件夹下
   • 使用 webpack 有一个属性 mode 来判断文件是在开发阶段还是转入到服务器的生产阶段
     • webpack --mode=production这是生产阶段的命令，这个命令会直接将 dist 文件夹下的代码进行压缩等操作
     • webpack --mode=development这是开发阶段的命令，这个命令会转化 dist 文件夹下的代码但是不会对其进行压缩操作，方便开发人员调试代码

       可以将命令写在 npm script 中 package.json 文件中的 script 下，生成 script 命令执行

2. webpack 的入口和出口文件都可以使用 es6 模块化或者 commonjs，但是两种导入和导出文件可以混用，但建议导入导出使用同一种方式
3. 实时监控 npm script 的命令可以在 script 属性中的命令末尾加入 --watch 就能实现实时监控

---

2022 年 3 月 31 日

1. 对 webpack 的配置文件(使用 nodejs 进行配置文件的建立)

   1. 在项目中建立 webpack.config.js 文件，在文件中配置相关项
   2. 在 webpack.config.js 中通过 commonjs 引入方法 module.export = {};
   3. 引入的第一项 mode 是设置工作模式：production(生产模式)、development(开发模式)、none(原始模式“不对引入文件进行操作”)
   4. 配置引入项
      1. 建立引入文件 entry:“引入文件路径”
      2. 建立导出文件对象 putput:{}
      3. 在导出文件对象中建立引出文件名 fliename:“自定义导出文件的文件名”
      4. 在导出文件对象中建立导出文件路径(引出文件必须使用绝对路径可以使用 nodejs 中的 path 属性将文件路径进行更改)const path =require("path");
      5. 在导出文件对象中建立属性 path,同时建立文件path:path.join(__dirname,"定义的文件夹名称")

      const path = require("path");
      module.exports = {
       entry:"./src/index.js",
       output:{
           filename:"main.js",
           path:path.join(__dirname,"distOnes")
       }
      }
   

2. 通过 webpack 对其他文件进行处理——css

   1. webpack 的执行机制是默认执行 js 文件需要操作 css 文件需要安装"css-loader"和"style-loader"插件npm i css-loader style-loder -D
   2. 在 webpack.config.js 文件中添加 module 属性,module 属性值是对象
   3. 在 module 属性值中建立数组 rules(针对其他模块加载规则的配置)
   4. 在 rules 数组中建立处理 css 文件的对象，对象中建立 test 属性来写入需要处理的模块文件路径
   5. 在 rules 数组中建立 use 属性进行指定我们匹配的文件需要用到的 loader

   /*建立的webpack.config.js文件内容*/
   const path = require("path");
   module.exports = {
   entry: ["./src/index.js","./src/index.css"],
   //引入需要处理的js文件和css文件
   output: {
       filename: "main.js",
       //需要导出的文件名
       path: path.join(__dirname, "distOnes"),
       //将相对路径用path转化为绝对路径
   },
   module:{
      rules:[
          {
              test:/.css$/,
              //需要转化的文件
              use:[
                  "style-loader",
                  "css-loader"
              ]
              //需要用到的转化加载器
          }
      ]
   }
   };
   

   loader 是加载器用来处理文件，webpack 的默认 loader 是处理 js 文件的
   

3. 使用文件加载器 file-loader 对其他样式文件进行加载（加载 jpg 文件）

   1. 需要在项目中安装 file-loder npm i file-loder
   2. 对 webpack.config.js 文件中的 module 对象中的 rules 数组添加一个对象{test:/.jpg$/,use:["file-loader"]}
   3. 在 webpack.config.js 文件中的 output 数组下添加默认目录publicPath:"distOnes/"服务器会默认加载根目录所以需要更改

   const path = require("path");
   module.exports = {
   entry: ["./src/index.js"],
   output: {
       filename: "main.js",
       path: path.join(__dirname, "distOnes"),
       publicPath:"distOnes/"
       //对服务器默认目录进行更改
   },
   module:{
      rules:[
          {
              test:/.css$/,
              use:[
                  "style-loader",
                  "css-loader"
              ]
          },
          {
            test:/.jpg$/,
            use:[
              "file-loader"
            ]
          }
          //添加文件loader
      ]
   }
   };
   

---

2022 年 4 月 1 日

1. 使用 url-loader 操作文件将文件转化为 url 格式（jpg）
   1. 需要在项目中安装 url-loader 文件npm i url-loader -D
   2. 在 webpack.config.js 文件中的 rules 文件中写入使用的 url-loader

      需要先安装 file-loader，要是使用 options 限制转化大小需要用到 file-loder 来转化其他文件

      const path = require("path");
      module.exports = {
      entry: ["./src/index.js"],
      output: {
       filename: "main.js",
       path: path.join(__dirname, "distOnes"),
       publicPath: "distOnes/",
      },
      module: {
       rules: [
         {
           test: /.css$/,
           use: ["style-loader", "css-loader"],
         },
         // {
         //   test: /.jpg$/,
         //   use: ["file-loader"],
         // },
         {
           test: /.jpg$/,
           use: {
             loader: "url-loader",
             //指定使用的loader
             //use["url-loader"] 在不使用file-loader转化的时候不需要设置options只需要使用这个
             options: {
               limit: 10 * 1024,
               //指定使用url-loader操作jpg文件类型的大小，小于此文件进行文件转化，大于此类型不进行转化
             },
           },
         },
       ],
      },
      };
   

2. loader 加载器一般分为三种：编译转换类（css-loader）、文件操作类（file-loader）、代码检查类
3. webpack 默认是打包工具并不能见 ES6 的语法转换为 ES5，这时候就需要安装将默认的转化工具更改为 babel-loader,但 babel-loader 需要安装 babel 插件，需要在下载 babel-loader 的同时下载@babel/core 和@babel/preset-env npm i babel-loader -D``npm @babel/core @babel/preset-env -D

      module: {
    rules: [
      {
        test: /.js$/,
        //添加需要指定的元素
        use: {
          loader: "babel-loader",
          //配置babel-loader
          options: {
            presets: ["@babel/preset-env"]
            //导入插件@babel/presets-env
          },
        },
      },
    ]
   }
   

---

2022 年 4 月 3 日

1. 自动清除输出目录，需要安装第三方插件 clean-webpack-plugin
   1. 在 webpack.config.js 文件中导入这个插件const {CleanWebpackPlugin} = require("clean-webpack-plugin");
   2. 在为配置对象添加一个 plugins 属性，此属性专门用来配置插件的地方plugins:[new CleanWebpackPlugin()];

     module: {
       rules: [
         {
           //设置需要转化的样式
           test: /.js$/,
           use: {
             loader: "babel-loader",
             options: {
               presets: ["@babel/preset-env"],
             },
           },
         },
         {
           test: /.css$/,
           use: ["style-loader", "css-loader"],
         },
       ],
      },
      //设置清除输出目录
      plugins: [new CleanWebpackPlugin()],
   };
   

2. 使用 webpack 输出 html 文件，需要安装 html-webpack-plugin 插件
   1. 在 webpack.config.js 文件中导入插件const HtmlWebpackPlugin = require("html-webpack-plugin")
   2. 在配置文件 plugins 属性中配置插件plugins:[new HtmlWebpackPlugin()]

      module: {
       rules: [
         {
           test: /.js$/,
           use: {
             loader: "babel-loader",
             options: {
               presets: ["@babel/preset-env"],
             },
           },
         },
         {
           test: /.css$/,
           use: ["style-loader", "css-loader"],
         },
         // {
         //   test: /.jpg$/,
         //   use: ["file-loader"],
         // },
         {
           test: /.jpg$/,
           use: {
             loader: "url-loader",
             //指定使用的loader
             options: {
               limit: 10 * 1024,
               //指定使用url-loader操作jpg文件类型的大小，小于此文件进行文件转化，大于此类型不进行转化
             },
           },
         },
       ],
      },
      plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin()],
   

   使用 html-webpack-plugin 插件的时候需要将前期 output 中的更改默认路径去掉

3. 自定义输出 html 文件方式可以在 plugins 当中的 newHtmlWebpackPlugin()的()中添加一个对象如 title:“更改的 title 标签名”,就能定义输出 html 文件plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin({title:"webpack"})]
4. 需要生成多个 html 文件的方式是在 plugins 属性中添加多个 new HtmlWebpackPlugin()实例对象，同时括号中添加文件名 filename 属性就可以了new HtmlWebpackPlugin(), new HtmlWebpackPlugin({filename:"about.html"})],注意要是没有 filename 那默认的 html 文件就是 index.html
5. 让 webpack 能够监听文件变化从而自动打包在执行命令是添加–watch 既npx webpack --watch
6. webpack 集成了一个自动编码及刷新游览器显示工具 webpack Dev Server 安装命令npm i webpack-dev-server -D 运行命令npx webpack-dev-server
7. Source Map 是为了解决源代码与运行代码不一致产生的问题：将开生产环境中的代码逆向的到开发过程的源代码
   • jquery 中的 jquery.min.map 文件旧是 jquery.min.js 的映射文件

---

2022 年 4 月 5 日

1. 对 Source Map 的使用需要在 webpack.config.js 文件中添加 devfool 属性devfool:["source-map"]当执行 webpack 时就会生成 map 文件
2. devfool 的其他属性：
   
3. 在配置文件中开启 dev Server 需要在 webpack.config.js 文件中配置 devServer 属性devServer:{hot:true},并且在文件中引入 webpack 及cnost webpack = require("webpack"), plugins 数组下加上 new webpack.HotModuleReplacementPlugin(),此时在命令行输入npx webpack-dev-server --open就能启动本地服务器，同时在 devServer 对象上加入static: "./src",启动跟目录[devServer 的 static 属性用法]http://expressjs.com/en/4x/api.html

---

2022 年 4 月 7 日

1. webpack的代码分包（分割）功能：需要在entry将打包入口文件写成对象，写入两个打包入口，出口文件output可以使用动态打包，将出口文件名前加入"[name].出口文件路径"时出口文件名前会自动加上写入的入口文件，同时需要配HotModuleReplacementPlugin()属性内容就可以了
2. 将所有属性都提取共有部分在配置文件加上optimization:{splitChunks:{chunks}}