前端工程化学习笔记2022 年 3 月 19 日 2022 年 3 月 20 日 2022 年 3 月 21 日 202

gulp
模块化
1. 2022 年 3 月 24 日
webpack

2022 年 3 月 19 日

gulp

对文件进行自动化操作使用 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 文件中写自动化代码
在 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"))
    );
   };
```
1. 如果想在操作文件位置将所有的文件目录样式一起传进来可以在 src 的第二个参数传入{base:"需要的目录样式目录名"}
2. 通过 module.exports={}进行抛出

2022 年 3 月 20 日

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

2022 年 3 月 21 日

通过 glup 对文件进行自动删除
1. 下载插件 del：npm i del - D
2. 在 gulpfile.js 文件中引入：const del = require("del")
3. 创建自动化脚本：const delGulp = ()=>{ del([需要删除文件路径]) }

2022 年 3 月 23 日

建立 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"
 }
})
```

模块化

2022 年 3 月 24 日

ES modules 的相关特性
1. ES modules 使用的是严格模式，忽略了"use strict"
2. 每个 ES modules 模块都是单独私有的作用域
3. ESM 是通过 cors 去请求外部的 JS 模块
4. ESM 的 script 会延迟执行脚本
使用 browser-sync 启动本地实时更新服务器：使用browser-sync --files **/*.js实时监控 js 文件变化
module 使用方法
1. 通过 import 进行导入成员，通过 export 进行导出成员
```
//./ba.js中的代码
   export var name = "module的用法";
//.cs.js中的代码
   import {name} from "./ba.js"
   console.log(name);
```
1. 通过as进行导出重命名，当导出文件使用了as重命名后，导入文件要用重命名后的文件名export name as mode导入文件要使用mode名import {mode} from "./ba.js"
2. 若果导出名用了defaule,这个值就作为当前文件默认导出的成员，导入此成员的时候可以用as重命名在使用import {default as name} "./ba.js" //默认成员名使用时用那么
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"逗号左边的是默认成员，逗号右边的是具名成员
如果要将导入的文件作为成员直接导出可以使用exprot直接导出export("./n=ba.js").then(funciton(module){console.log(module)}，但这样导出自己的作用域就无法使用,使用场景是如果项目中有很多组件可以将它写在一个文件中直接用export导出，这样在项目中引用组件就不用一条一条的导入，可以直接导入此文件的内容
ES Module属于2014年新添加的属性，有一部分浏览器是不支持的，若想要支持可以在script中引入module-loder,但是在支持module的游览器会运行两边，这时可以使用script标签中的nomodule进行解决，但这个属性只适合在开发中使用因为效率慢

webpack

2022 年 3 月 26 日

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

2022 年 3 月 27 日

使用 webpack
- webpack 安装完成后开发阶段的代码放入 src 文件夹下
- 通过在命令行中使用命令 npx webpack将开发阶段的代码转入到文件夹 dist 文件夹下
- 使用 webpack 有一个属性 mode 来判断文件是在开发阶段还是转入到服务器的生产阶段
  - webpack --mode=production这是生产阶段的命令，这个命令会直接将 dist 文件夹下的代码进行压缩等操作
  - webpack --mode=development这是开发阶段的命令，这个命令会转化 dist 文件夹下的代码但是不会对其进行压缩操作，方便开发人员调试代码
    
    可以将命令写在 npm script 中 package.json 文件中的 script 下，生成 script 命令执行
webpack 的入口和出口文件都可以使用 es6 模块化或者 commonjs，但是两种导入和导出文件可以混用，但建议导入导出使用同一种方式
实时监控 npm script 的命令可以在 script 属性中的命令末尾加入 --watch 就能实现实时监控

2022 年 3 月 31 日

对 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")
    }
   }
```

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

webpack 的执行机制是默认执行 js 文件需要操作 css 文件需要安装"css-loader"和"style-loader"插件npm i css-loader style-loder -D
在 webpack.config.js 文件中添加 module 属性,module 属性值是对象
在 module 属性值中建立数组 rules(针对其他模块加载规则的配置)
在 rules 数组中建立处理 css 文件的对象，对象中建立 test 属性来写入需要处理的模块文件路径
在 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 文件的

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

需要在项目中安装 file-loder npm i file-loder
对 webpack.config.js 文件中的 module 对象中的 rules 数组添加一个对象{test:/.jpg$/,use:["file-loader"]}
在 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 日

使用 url-loader 操作文件将文件转化为 url 格式（jpg）

需要在项目中安装 url-loader 文件npm i url-loader -D
在 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文件类型的大小，小于此文件进行文件转化，大于此类型不进行转化
          },
        },
      },
    ],
   },
   };

loader 加载器一般分为三种：编译转换类（css-loader）、文件操作类（file-loader）、代码检查类

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
       },
     },
   },
 ]
}

前端工程化学习笔记