07 . 前端工程化(ES6模块化和webpack打包)

模块化规范

传统开发模式主要问题
/*
		1. 命名冲突
		2. 文件依赖
*/

通过模块化解决上述问题

/*
		模块化就是把单独的一个功能封装在一个模块(文件)中,模块之间相互隔离,
			但是可以通过特定的接口公开内部成员,也可以依赖别的模块.
		
		模块化开发好处:
				方便代码的重用,从而提高开发效率,并且方便后期的维护
*/
浏览器模块化规范
/*
		AMX   (Require.js)
		CMD		(Sea.js)
*/
服务器端模块化规范
/*
		CommonJS
				1.模块分文单文件模块与包
				2.模块成员导出: module.exports和exports
				3.模块成员导入: require('模块标识符')
*/

ES6模块化

在ES6模块化规范之前,Javascript社区已经尝试并提出了AMD,CMD,CommonJS等模块化规范.

但是,这些社区提出的模块化标准还是存在一定的差异性与局限性,并不是浏览器与服务器通用的模块化标准,例如:

/*
		AMD和CMD适用于浏览器端的JavaScript模块化
		CommonnJS适用于服务器端的JavaScript模块化
*/

因此,在ES6语法规范中,在语言层面上定义了ES6模块化规范,是浏览器与服务器端通用的模块化开发规范.

ES6模块化规范中定义

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

推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

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

1.安装babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill

2.创建babel.config.js

在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下

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

3.创建index.js文件

/*
		在项目目录中创建index.js文件作为入口文件
    在index.js中输入需要执行的js代码,例如:
        console.log("ok");
*/

4.使用npx执行文件

打开终端,输入命令:npx babel-node ./index.js

默认导出

默认导出语法为export default 默认导出的成员

    export default {
        成员A,
        成员B,
        .......
    },如下:
    let num = 100;
    export default{
        num
    }

Example1

// 当前文件模块为m1.js

// 定义私有成员a和c
let a = 10
let c = 20
let d = 30

// 外界访问不到变量b,因为他没有被暴露出去
function show() {
    console.log('1111')
}


// 将本模块的私有成员暴露出去,供其他模块使用
export default {
    a,
    c,
    show
}
默认导入

默认导入语法import 接受名称 from ‘模块标识符’

// 导入模块成员
import m1 from './m1/m1.js'

console.log(m1)

// 打印输出的结果为:
[email protected] Vue_Student_Demo % npx babel-node ./index.js
{ a: 10, c: 20, d: 30, show: [Function: show] }

注意: 每个模块中,只允许使用唯一的一次export default,否则会报错

按需导出

按需导出语法

Export let s1 = 10

    export let num = 998;
    export let myName = "jack";
    export function fn = function(){ console.log("fn") }

Example

// 当前文件模块为m1.js

// 向外按需导出变量为s1
export let s1 = 'aaa'

// 向外按需导出变量为s2
export let s2 = 'ccc'

// 向外按需导出方法 say
export function say = function() {}
按需导入

按需导入语法

Import { s1 } from ‘模块标识符’

    import { num,fn as printFn ,myName } from "./test.js"
    // 同时导入默认导出的成员以及按需导入的成员
    import test,{ num,fn as printFn ,myName } from "./test.js"
// 注意:一个模块中既可以按需导入也可以默认导入,一个模块中既可以按需导出也可以默认导出

Example1

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

console.log(s1)  // 打印输出aaa
console.log(s2)  // 打印输出ccc
console.log(say) // 打印输出[Function: say]

直接导入并执行代码

有时候,我们只想单纯执行某个模块的代码,并不需要得到模块中向外暴露的成员,此时,可以直接导入并执行模块代码

import "./test2.js";

m1.js

// 当前文件模块为m2.js

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

Webpack概念

当前Web开发面临的困境
/*
		文件依赖关系错综复杂
		静态资源请求效率低
		模块化支持不友好
		浏览器对高级JavaScript特性兼容程度较低
*/

webpack是一个流行的前端项目构建工具,可以解决目前web开发的困境。
webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性

WebPack的基本使用
/*
	1.创建列表隔行变色项目
     新建项目空白目录,并运行npm innit -y 命令, 初始化包管理配置文件package.json

  2.新建src源代码目录

  3.新建src/index.html首页
  
  4. 初始化首页基本结构
  
  5. 运行 npm install jquery -s 命令,安装jQuery
  		导入jQuery
        打开index.js文件,编写代码导入jQuery并实现功能:
        import $ from "jquery";
        $(function(){
            $("li:odd").css("background","cyan");
            $("li:odd").css("background","pink");
        })
  
  6. 通过模块化形式,实现列表隔行变色效果
*/

注意:此时项目运行会有错误,因为import $ from "jquery";这句代码属于ES6的新语法代码,在浏览器中可能会存在兼容性问题 所以我们需要webpack来帮助我们解决这个问题。

项目中配置webpack
/*	
		1).打开项目目录终端,输入命令:
        npm install webpack webpack-cli -D
    
    2).然后在项目根目录中,创建一个 webpack.config.js 的配置文件用来配置webpack
        在 webpack.config.js 文件中编写代码进行webpack配置,如下:
        module.exports = {
            mode:"development"//可以设置为development(开发模式),production(发布模式)
        }
        补充:mode设置的是项目的编译模式。
        如果设置为development则表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些

        如果设置为production则表示项目处于上线发布阶段,会进行压缩和混淆,打包速度会慢一些
   
    3).修改项目中的package.json文件添加运行脚本dev,如下:
        "scripts":{
            "dev":"webpack"
        }
        注意:scripts节点下的脚本,可以通过 npm run 运行,如:
        运行终端命令:npm run dev
        将会启动webpack进行项目打包
    
    4).运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件
        打开项目目录终端,输入命令:
        npm run dev
        等待webpack打包完毕之后,找到默认的dist路径中生成的main.js文件,将其引入到html页面中。
        浏览页面查看效果。
*/	
设置Webpack的打包入口/出口
/*
		  在webpack 4.x中.
          默认会将src/index.js 作为默认的打包入口js文件
          默认会将dist/main.js 作为默认的打包输出js文件
*/

如果不想使用默认的入口/出口js文件,我们可以通过改变 webpack.config.js 来设置入口/出口的js文件,如下:

    const path = require("path");  // 导入node.js中专门操作路径的模块
    module.exports = {
        mode:"development",
        // 设置入口文件路径
        entry: path.join(__dirname,"./src/xx.js"),

        //设置出口文件
        output:{
            //设置输出文件路径
            path:path.join(__dirname,"./dist"),
            //设置输出文件名称
            filename:"res.js"
        }
    }
Tags: