关于模块化运行

目录

一、什么是模块化

模块化的好处

二、怎么实现模块化

①新建一个项目，在里面新建一个空的文件夹js\build

②在项目内新建一个或几个相对应功能的模块;比如student类模块。teacher模块(都为js)再新建一个输出文件index.html

③在student模块内编写内容，并将模块内容导出

④在index.js模块将student引入

⑤webpack的用法

        entry：入口文件，打包谁，打包主文件

        output：出口文件，打包后的文件放在什么位置

        path：属性存放路径，指定文件夹名称

        module.exports:node模块导出函数

        filename：打包后文件名称

        path.resolve（__dirname," "）:找到当前文件所在的绝对路径

⑥在项目文件内右键运行Git bash here，在其中输出webpack -v 观察是否运行成功

⑦成功后会在build文件中找到一个build.js文件

⑧在index.heml中将index.js替代为build/build.js文件引入，运行会输出正确的模块则运行成功

---

一、什么是模块化

模块化的思想：讲一个复杂的功能拆分成若干个小模块，每一个模块 单独实现一个对应的功能，并且模块之间相互不影响，比如：外卖软件将商品，购物车，商品展示分开进行

模块化的好处

①方便维护，代码定位准确，哪里的错误可以直接找到

②内部变量不影响，比如变量的命名，替代问题

③方便团队开发，每个人做自己对应的业务，后期构建

④模块可以复用，相同的逻辑可以重复使用

二、怎么实现模块化

将一个复杂的功能拆分为N个模块，index.js   a.jx     b.jx    c.jx

(需要在node环境中运行程序)

node环境下载地址：http://nodejs.cn/download/
node环境安装步骤：

下载完直接下一步下一步，安装在c盘中，不需要做任何更改
检测安装是否成功：win+r cmd 输入 node -v
安装git模拟命令行：https://git-scm.com/。同样操作。右键 git bash here 命令行打开
利用node环境安装webpack工具 。输入代码： cnpm install webpack@3.0.0 -g
-g表示全局安装 ，node环境的任意位置都可以使用
安装成功后输入：webpack -v 检测是否安装成功，成功后会输出版本号；

①新建一个项目在里面新建一个空的文件夹js.build

②在项目内新建一个或几个相对应功能的模块;比如student类模块。teacher模块(都为js)再新建一个输出文件index.html

如图所示，a.js内存放学生类模块  index.js为学生对象  引入模块内容

③在student模块内编写内容，并将模块内容导出

let a=20

class student {

        constructor(name,age,study){

                this.name=name;

                this.age=age;

                this.study=study;

        }

}

 //导出模块方法

export{student}

④在index.js模块将student模块引入

import  s   from "./a.js "     --- 代表a.js导出的内容

//根据学生类对应的业务

//引入相对应模块的内容

//语法    ---    inport 定义变量  from  模块地址

//import  s   from "./a.js "     --- 代表a.js导出的内容

//new s.student( )

//解构语法 s是对象，对象中的导出的类

import{student} from "./student.js"

//根据学生类创建一个学生对象

let s1=new student("王一"，21)

console.log（s1）

如果此刻将index.js引入到index.html中运行，则会报错--