模块化规范
传统开发模式主要问题
/* 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
npminstall--save-dev
babel/corebabel/clibabel/preset-envbabel/nodenpminstall--savebabel/polyfill2.创建babel.config.js在项目目录中创建babel.config.js文件。编辑js文件中的代码如下
constpresets=[[
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执行文件
打开终端，输入命令：npxbabel-node./index.js
默认导出
默认导出语法为exportdefault默认导出的成员
exportdefault{成员A,成员B,.......},如下：letnum=;exportdefault{num}Example1
//当前文件模块为m1.js//定义私有成员a和cleta=10letc=20letd=30//外界访问不到变量b,因为他没有被暴露出去functionshow(){console.log()}//将本模块的私有成员暴露出去,供其他模块使用exportdefault{a,c,show}默认导入
默认导入语法import接受名称from模块标识符
//导入模块成员importm1from./m1/m1.jsconsole.log(m1)//打印输出的结果为:youmen
bogonVue_Student_Demo%npxbabel-node./index.js{a:10,c:20,d:30,show:[Function:show]}注意:每个模块中,只允许使用唯一的一次exportdefault,否则会报错按需导出
按需导出语法Exportlets1=10
exportletnum=;exportletmyName=jack;exportfunctionfn=function(){console.log(fn)}Example
//当前文件模块为m1.js//向外按需导出变量为s1exportlets1=aaa//向外按需导出变量为s2exportlets2=ccc//向外按需导出方法sayexportfunctionsay=function(){}按需导入
按需导入语法Import{s1}from模块标识符
import{num,fnasprintFn,myName}from./test.js//同时导入默认导出的成员以及按需导入的成员importtest,{num,fnasprintFn,myName}from./test.js//注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出Example1
//导入模块成员import{s1,s2asss2,say}from./m1.jsconsole.log(s1)//打印输出aaaconsole.log(s2)//打印输出cccconsole.log(say)//打印输出[Function:say]直接导入并执行代码
有时候,我们只想单纯执行某个模块的代码,并不需要得到模块中向外暴露的成员,此时,可以直接导入并执行模块代码
import./test2.js;m1.js
//当前文件模块为m2.js//在当前模块中执行一个for循环操作for(leti=0;i3;i++){ console.log(i)}Webpack概念
当前Web开发面临的困境
/* 文件依赖关系错综复杂 静态资源请求效率低 模块化支持不友好 浏览器对高级JavaScript特性兼容程度较低*/webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性
WebPack的基本使用
/* 1.创建列表隔行变色项目新建项目空白目录,并运行npminit-y命令,初始化包管理配置文件package.json2.新建src源代码目录3.新建src/index.html首页4.初始化首页基本结构5.运行npminstalljquery-s命令,安装jQuery 导入jQuery打开index.js文件，编写代码导入jQuery并实现功能：import$fromjquery;$(function(){$(li:odd).css(background,cyan);$(li:odd).css(background,pink);})6.通过模块化形式,实现列表隔行变色效果*/注意：此时项目运行会有错误，因为import$fromjquery;这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题所以我们需要webpack来帮助我们解决这个问题。
项目中配置webpack
/* 1).打开项目目录终端，输入命令:npminstallwebpackwebpack-cli-D2).然后在项目根目录中，创建一个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节点下的脚本，可以通过npmrun运行，如：运行终端命令：npmrundev将会启动webpack进行项目打包4).运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件打开项目目录终端，输入命令:npmrundev等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。浏览页面查看效果。*/ 设置Webpack的打包入口/出口
/* 在webpack4.x中.默认会将src/index.js作为默认的打包入口js文件默认会将dist/main.js作为默认的打包输出js文件*/如果不想使用默认的入口/出口js文件，我们可以通过改变webpack.config.js来设置入口/出口的js文件，如下：
constpath=require(path);//导入node.js中专门操作路径的模块module.exports={mode:development,//设置入口文件路径entry:path.join(__dirname,./src/xx.js),//设置出口文件output:{//设置输出文件路径path:path.join(__dirname,./dist),//设置输出文件名称filename:res.js}}Webpack的自动打包
/* 1.运行npminstallwebpack-dev-server-D命令,安装支持项目自动打包的工具 2.修改package.json--scripts中的dev命令如下 scripts:{ dev:webpack-dev-server//script节点下的脚本,可以通过npmrun执行 } 3.将src--index.html中,script脚本的引用路径,修改为/buldle.js 4.运行npmrundev命令,重新进行打包 5.浏览器中访问