前端工程化

标签：npm babel 前端 js webpack 工程化 loader 打包

1.模块化概述

1.1传统开发模式带来的问题

1.命名冲突

2.文件依赖

1.2通过模块化解决传统遗留问题

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

2.模块化相关规范

2.1浏览器端模块化规范

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

2.2服务端模块化规范

CommonJS

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

2.3统一模块化规范 -ES6模块化

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

2.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.5ES6中模块化的基本语法

1.默认导出与导入（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， 否则会报错

2.按需导入、导出

export let s1='aaa'

export let s2='ccc'

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

3.直接导入

import './m2.js'      


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

3.webpack

3.1web开发面对的环境

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

3.2 webpack概述

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

3.3 webpack基本使用

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

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

2.在项目中安装和配置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进行项目打包

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

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'  // 输出文件的名称
  }
}

4.配置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 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

5.配置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打包期间会用到的一些插件列表
}

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

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

3.4 webpack中的加载器

1.通过loader 打包非JS模块

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

loader加载器可以协助webapck打包处理特定的文件模块，比如；
less-loader 可以打包处理 .less相关的文件
sass-loader可以处理 .scss相关的文件
url-loader可以打包处理css中与url路径相关的文件
loader的调用过程

3.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

标签：npm,babel,前端,js,webpack,工程化,loader,打包
From： https://www.cnblogs.com/Gurad/p/16724515.html

1.模块化概述

1.1传统开发模式带来的问题

1.2通过模块化解决传统遗留问题

2.模块化相关规范

2.1浏览器端模块化规范

2.2服务端模块化规范

2.3统一模块化规范 -ES6模块化

2.4Node.js中通过babel体验ES6模块化

2.5ES6中模块化的基本语法

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

2.按需导入、导出

3.直接导入

3.webpack

3.1web开发面对的环境

3.2 webpack概述

3.3 webpack基本使用

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

2.在项目中安装和配置webpack

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

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

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

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

3.4 webpack中的加载器

3.5 webpack中加载器的基本使用

1.打包处理css文件

2.打包处理less文件

3.打包处理scss文件

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

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

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

相关文章

赞助商

阅读排行

前端工程化

1.模块化概述

1.1传统开发模式带来的问题

1.2通过模块化解决传统遗留问题

2.模块化相关规范

2.1浏览器端模块化规范

2.2服务端模块化规范

2.3统一模块化规范 -ES6模块化

2.4Node.js中通过babel体验ES6模块化

2.5ES6中模块化的基本语法

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

2.按需导入、导出

3.直接导入

3.webpack

3.1web开发面对的环境

3.2 webpack概述

3.3 webpack基本使用

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

2.在项目中安装和配置webpack

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

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

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

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

3.4 webpack中的加载器

3.5 webpack中加载器的基本使用

1.打包处理css文件

2.打包处理less文件

3.打包处理scss文件

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

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

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

相关文章

赞助商

阅读排行

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