Vue全家桶-前端工程化(模块化)

前端工程化(模块化)

1.模块化的相关规范

1.1 模块化概述

传统开发模式的主要问题
  * 命名冲突
  * 文件依赖

通过模块化解决上述问题
  * 模块化就是单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块
  * 模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护

1.2 浏览器端模块化规范

1.3 服务器端模块化规范

    1. CommonJS
     模块分为单文件模块与包

1.4 大一统的模块化规范 -ES6模块化

    社区提出的模块化标准,存在差异性,局限性,
    ES6模块化规范:
     * 每个js文件都是一个独立的模块
     * 导入模块成员使用import关键字
     * 暴露模块成员使用 export 关键字

    1. Node.js 中通过 babel 体验ES6 模块化
       * npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 

       * npm install --save @babel/polyfill

       * 项目根目录创建 babel.config.js

       * babel.config.js 文件内容

const presets = {
             ["@babel/env",{
                 targets:{
                     edge:"17",
                     firefox:"60",
                     chrome:"67",
                     safari:"11.1"
                 }
             }]
         };
         module.exports = { presets }

       * 通过npx babel-node index.js 执行代码

1.5 ES6 模块化的基本语法

    1.默认导出 与 默认导入
     * 默认导出语法 export default 默认导出的成员
     * 默认导入 import 接收名称 from '模块标识符'
        注意: 每一个模块只允许使用唯一的一次 export default,否则会报错

    2. 按需导出与按需导入
      * 按需导出语法 export let s1 = 10;
      * 按需导入语法 import { s1 } from '模块标识符'

      // 当前文件模块为 m1.js
      // 向外按需导出变量
      export let s1 = 'aaa';
      export let s2 = 'ccc';
      export let say = function (){}

      // 当前文件index.js
      //导入模块成员
      import { s1,s2 as ss2,say } from './m1.js'

      console.log(s1); // 打印输出aaa
      console.log(ss2); // 打印输出 ccc
      console.log(say); // 打印输出 [Function:say]
    
    3. 直接导入并执行模块代码
      只想单纯执行某个模块中的代码,并不需要得到模块中向外暴露的成员

      // 当前文件模块 m2.js
      // 在当前模块中执行一个 for 循环操作
      for(let i = 0;i<3;i++){
          console.log(i)
      };

      // 当前文件index
      import './m2.js'

2. webpack 用法

2.1 当前 Web 面临的困境

webpack 概述
  webpack 是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境.
  webpack提供了友好的模块化支持,以及代码压缩混淆,处理js兼容问题,性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性

2.2 webpack 的基本使用

 npm install webpack webpack-cli -D
 根目录新建webpack.config.js

module.exports = {
     //编译模式
     mode:'development' 
 }

 package.json中 script 中配置 "dev":""webpack
npm run dev

3.配置打包的入口与出口

     webpack 的 4.x 版本中默认约定
      打包的入口文件为 src --> index.js
      打包的输出文件为 dist -->main.js

      如果要修改打包的入口与出口,可以在webpack.config.js中新增如下配置信息:

const path = require('path') //导入 node.js中专门操作路径的模块
       module.exports = {
           entry:path.join(__dirname,'./src/index.js'), //打包入口文件的路径
           output:{
               path:path.join(__dirname,'./dist'), // 输出文件的存放路径
               filename:'bundle.js' // 输出文件的名称
           };
       };

4. 配置 webpack 的自动打包功能

      A.安装自动打包功能的包:webpack-dev-server

        npm install webpack-dev-server -D

      B.修改package.json中的dev指令如下：

"scripts":{
            "dev":"webpack-dev-server"
        }

      C.将引入的js文件路径更改为：<script src="/bundle.js"></script>

      D.运行npm run dev，进行打包

      E.打开网址查看效果：http://localhost:8080

5. 配置 html-webpack-plugin 生成一个预览页面

      A.安装默认预览功能的包:html-webpack-plugin
      
        npm install html-webpack-plugin -D

      B.修改webpack.config.js文件，如下：

       //导入包
        const HtmlWebpackPlugin = require("html-webpack-plugin");

 //创建对象
        const htmlPlugin = new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称
            filename:"index.html"
        })

       C.继续修改webpack.config.js文件，添加plugins信息：

 module.exports = {
            ......
            plugins:[ htmlPlugin ]
        };

6.配置自动打包相关的参数

        package.json中的配置

        --open 打包完成后自动打开浏览器页面

        --host 配置 IP地址

        --port 配置端口

"scripts":{
            "dev":"webpack-dev-server --open --host 127.0.0.1 --post 8888"
        },

2.3 webpack 中的加载器

    1.通过loader打包非js模块
      在实际开发过程中,webpack默认只能打包处理以 .js后缀名结尾的模块,其他非 .js后缀名结尾的模块,webpack 默认处理不了,需要调用 loader加载器才可以正常打包,否则会报错!
       
       loader 加载器可以挟制 webpack 打包处理特定的文件模块,比如:

        * less-loader 可以打包处理 .less相关的文件

        * sass-loader 可以打包处理 .scss相关的文件

        * url-loader 可以打包处理 css 中与 url 路径相关的文件

2.4 webpack 中加载器的基本使用

1.打包处理 css 文件

      * npm i style-loader css-loader -D 
      * webpack.config.js中 module-->rules 数组中 

rules : [
           {test:/\.css$/,use:['style-loader','css-loader']}
       ]

      其中, test 表示匹配的文件类型, use 表示对应要调用的 loader
    
      注意:
        *　use 数组中指定的 loader 顺序是固定的

        *　多个 loader 的调用顺序是:从后往前调用

2. 打包处理 less 文件

      * 运行 npm i less-loader less -D 命令

      * webpack.config.js中 module-->rules 数组中 

 module:{
            rules:[
                {test:/\.less$/,use:['style-loader','css-loader','less.loader']}
            ]
        }

3.打包处理 scss 文件

      * 运行 npm i sass-loader node-sass -D 命令

      * webpack.config.js中 module-->rules 数组中 

 //所有第三方文件模块的匹配规则
        module:{
          rules:[
            {test:/\.scss/,use:['style-loader','css-loader','sass-loader']}
          ]
        }

4.配置 postcss 自动添加 css 的兼容前缀

      * 运行 npm i postcss-loader autoprefixer -D 命令

      * 在项目根目录中创建 postcss 的配置 post.config.js,并初始化如下配置: 

const autoprefixer = require('autoprefixer');
        module.exports = {
          plugins:[autoprefixer] //挂载插件
        }

      * webpack.config.js中 module-->rules 数组中 

  module:{
          rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
          ]
        }

5.打包样式表中的图片和字体文件

      * 运行 npm i url-loader file-loader -D 命令

      * 在 webpack.config.js 的 module --> rules 数组中,添加 loader 规则如下:

module:{
          rules:[
            {
              test:/\.jpg|png|gif|bmp|ttf|eot|swg|woff|woff2/,
              //limit用来设置字节数，只有小于limit值的图片，才会转换
              //为base64图片
              use:'url-loader?limit = 16940'
            }
          ]
        }

6. 打包js文件中的高级语法

        A.安装babel转换器

cnpm install babel-loader @babel/core @babel/runtime -D

        B.安装babel语法插件包

cnpm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

        C.在项目根目录创建并配置babel.config.js文件

module.exports = {
              presets:["@babel/preset-env"],
              plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
          }

        D.配置规则：更改webpack.config.js的module中的rules数组

 module.exports = {
              ......
              plugins:[ htmlPlugin ],
              module : {
                  rules:[
                      {
                          //test设置需要匹配的文件类型，支持正则
                          test:/\.css$/,
                          //use表示该文件类型需要调用的loader
                          use:['style-loader','css-loader']
                      },
                      {
                          test:/\.less$/,
                          use:['style-loader','css-loader','less-loader']
                      },
                      {
                          test:/\.scss$/,
                          use:['style-loader','css-loader','sass-loader']
                      },{
                          test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                          //limit用来设置字节数，只有小于limit值的图片，才会转换
                          //为base64图片
                          use:"url-loader?limit=16940"
                      },{
                          test:/\.js$/,
                          use:"babel-loader",
                          //exclude为排除项，意思是不要处理node_modules中的js文件
                          exclude:/node_modules/
                      }
                  ]
              }
          }