前端工程化

1|01.模块化概述

1|11.1传统开发模式带来的问题

1.命名冲突

2.文件依赖

1|21.2通过模块化解决传统遗留问题

• 模块化： 把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员、依赖别的模块
• 模块化的优点： 方便代码的重用、提升开发效率，方便后期维护

2|02.模块化相关规范

2|12.1浏览器端模块化规范

• AMD Require.js （http://www.requirejs.cn/）
• CMD sea,js (https://seajs.github.io/seajs/docs/)

2|22.2服务端模块化规范

CommonJS

• 模块分为单文件模块和包
• 模块成员导出： module,exports和exports
• 模块成员导入： require('模块规范符')

2|32.3统一模块化规范 -ES6模块化

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

2|42.4Node.js中通过babel体验ES6模块化

1. 	npm install --save-dev  @babel/core @babel/cli @babel/preset-env @babel/node
2.  npm install --save @babel/polyfill
3.  项目跟目录创建文件 babel.config.js 
4. babel.config.js 文件内容如下  
const presets=[
  ["@babel/env",{
    targets:{
      edge:'17',
      firefox:'60',
      chrome:'67',
      safari:'11.1'
    }
  }]
];
module.exprots={presets};
5. 	npx babel-node index.js 执行代码

2|52.5ES6中模块化的基本语法

1|01.默认导出与导入 （export defalut）

// 定义私有成员 a c
let a=10
let c=20 
// 外界访问不到变量d  因为没有被暴露出去  
let d=30 
function show(){
console.log('11111');
}
export default {a,c,show}
//默认导入
import m1 from './m1.js'

console.log(m1) 
每个模块内只允许使用唯一的一次 export default， 否则会报错

1|02.按需导入、导出

export let s1='aaa'

export let s2='ccc'

export function say(){
console.log('say');
}
import m1,{s1,s2 as ss2,say} from './m1.js'

1|03.直接导入

import './m2.js'      


for(let i=0;i<10;i++){
	console.log(i)
}

3|03.webpack

3|13.1web开发面对的环境

• 文件依赖关系错综复杂
• 静态资源请求效率低
• 模块化支持不友好
• 浏览器对js特性兼容性较低

3|23.2 webpack概述

一个流行的前端项目构建工具(打包工具)===>解决当前的web开发中面临的困境 ，webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容、性能优化等强大功能，提高了开发效率和项目的可维护性。

3|33.3 webpack基本使用

1|01.创建列表隔行变色项目

• 新建项目空白目录、npm init -y 初始化包管理配置文件，package.json
• 新建src源代码目录
• 新建src --->index.html 首页
• 初始化首页基本的结构
• npm install jquery -S ,
• 通过模块化的形式，实现列表隔行变色效果

1|02.在项目中安装和配置webpack

• 运行 npm install webpack webpack-cli -D ,安装webpack相关的包

• 在项目根目录中，创建名为webpack.config.js 的webpack配置文件

• 在webpack配置文件中，初始化如下

  moule.exports={
  	mode:'deveplopment' //mode用来指定 构建模式 
  }
  

• 在package.json配置文件中scripts节点下，新增dev脚本

  "script":{
  "dev":"webpack" //scripts 节点下的脚本，可以通过npm run 执行
  }
  

• npm run dev 启动webpack进行项目打包

1|03.配置打包的入口与出口

webpack的4.x 版本中默认约定:

• 打包的入口文件为src -> index.js
• 打包的输出文件为 src ->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'  // 输出文件的名称
  }
}

1|04.配置webpack自动打包的功能

• 运行npm install webpack-dev-server -D, 安装支持项目自动打包的工具

• 修改package.json -> scripts中的dev命令如下：

  “scripts":{
  	"dev":"webpack-dev-server" //script节点下的脚本，可以通过npm run 执行 
  }
  

• 1.将 src - -> index.html中，script脚本的引用路径，修改为"/bundle.js"

• 2.webpack编译产生在内存中，虚拟路径就是devServer中设置的当前项目的根路径

• 3.运行 npm run dev 重新进行打包

• 4.在浏览器中访问http://localhost:8080 查看，查看自动打包效果

• 实际测试自动打包部分可能不超成功 可以使用如下设置

  const path=require('path');
  
  module.exports={
    //  构建编译模式 
    mode:'development' ,  // production  development
    entry:path.join(__dirname,'./src/index.js'), //打包入口文件的路径
    output:{
      path:path.join(__dirname,'./dist'), //输出文件的存放路径 
      filename:'bundle.js'  // 输出文件的名称
    },
    devServer:{
      static:{
        directory:path.join(__dirname,'./'),
        watch:true
      }
    }
  }
  

  webpack-dev-server 会启动一个实时打包的http服务器

  webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

1|05.配置html-webpack-plugin 生成预览页面

• npm install html-webpack-plugin -D 安装生成预览页面的插件

• 修改webpack.config.js文件头部区域，添加如下信息

  //导入生成预览页面的插件，得到了一个构造函数 
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const htmlPlugin=new HtmlWebpackPlugin({
  	// 创建插件的实例
  	template:'./src/index.html',//指定要用到的模板文件
  	filename:'index.html' //指定生成的文件的名称，该文件存在于内存中，在目录中不显示
  })
  

• 修改webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

  module.exports={
  	plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表
  }
  

1|06.配置自动打包相关的参数

package.json中的配置 
// --open  打包完成后自动打开浏览器页面 
// --host 配置IP地址 
// --port 配置端口 
"scripts":{
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

3|43.4 webpack中的加载器

1.通过loader 打包非JS模块

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！

loader加载器可以协助webapck打包处理特定的文件模块，比如；

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

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

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

loader的调用过程

3|53.5 webpack中加载器的基本使用

1.打包处理css文件

css 、less、scss、postcss、js、image/font、vue

• npm i style-loader css-loader -D 安装处理css文件的loader

• 在webpack.config.js的module -> rules数组中，添加loader规则如下：

  // 所有第三方文件模块的匹配规则 
  module: {
    rules: [ 
      // 表示匹配到以.css结尾的文件，就使用style-loader和css-loader来打包处理
      { 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 数组中，添加 loader 规则

  // 所有第三方文件模块的匹配规则 
  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 数组中，添加 loader 规则

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

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

由于浏览器兼容性问题 ，IE中修改搜索框内placeholder颜色修改无效，可以通过postCSS自动添加css的兼容前缀。

• npm i postcss-loader autoprefixer -D

• 在项目根目录中新创建 postcss 的配置文件 postcss.config.js

  const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件 
  module.exports = { 
    plugins: [ autoprefixer ] // 挂载插件 
  }	
  

• webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则修改原来的css的loader规则，不是重新添加

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

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

• 对于一些图片路径，比如：background: url('../images/1.jpg');webpack默认处理不了，所

• 运行 npm i url-loader file-loader -D 命令，其中 file-loader 是 url-loader 的内置依赖项

• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

  module: {
    rules: [ 
      { 
        // 只要是这些后缀名结尾的文件，统一使用url-loader处理
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
        // 当use后面只有一项，可以不用数组，直接写一个字符串
        use: 'url-loader?limit=16940' 
      } 
    ]
  }
  

  其中 ? 之后的是 loader 的参数项，limit 用来指定图片的大小，单位是字节(byte)，只有小于 limit 大小的图片，才会被转为 base64 图片，base64 图片在加载期间会更快一些，如果大于等于这个数字，就不会转成 base64 图片，直接还是图片的 url 地址。

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

如果我们在index.js中写如下代码，weabpack打包的时候会报错，因为这些是js的高级语法。

class Person {
  static info = 'aaa'
}
console.log(Person.info)

• 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D。

  • 安装babel语法插件相关的包：npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D （我在执行这个命令的时候一直卡住，首先要保证下载源是taobao，如果还是卡住，可以尝试一个一个下载）。

• 在项目根目录中，新创建 babel 配置文件 babel.config.js 并初始化基本配置

• module.exports = { 
    presets: [ '@babel/preset-env' ], 
    plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties' ] 
  }
  

• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

  // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件，只处理我们自己写的js文件
  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  

这样再次执行：npm run dev 就不会报错了，终端也会打印 "aaa"。

webpack安装

​ npm install webpack -g 安装webpack命令界面 npm install webpack-cli -g

__EOF__

本文作者：Gurad
本文链接：https://www.cnblogs.com/Gurad/p/16724515.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！