以往我们是直接引入一些外部的js文件,有多少引多少,这样会造成一个js文件夹很多js文件,而且要一个一个的引入,影响浏览速度
在es6中支持了模块化开发,即你只需要引入一个入口的js文件,并不需要输入script标签引入
这一点有点像python
但是现在的浏览器是不支持es6的模块化的,我们能需要通过webpack这个工具进行打包已实现模块化开发
模块化基本语法
导出
export name
导出name;name可以是函数,类,变量,数字,对象…export default name
默认导出export * from '...js'
引入另一个js并将其导出export {a,v,c,d} from '...js'
只引入部分内容并导出export {default} from '...js'
引入另一个文件的default并导出
引入
import * as test from '....js'
引入全部内容import {a,b,c} from '....js'
引入指定内容import main from '....js'
引入export defaultlet promise=import ('/path')
异步引入,返回promise对象
webpack打包
1.下载webpack
npm i webpack -g
2.项目目录新键一个webpack的配置文件 webpack.config.js
键入如下内容
const path=require('path');
module.exports={
entry:'./src/index.js',//入口文件
output:{
path:path.resolve(__dirname,'build'),//打包后js存放路径
filename:'bundle.js'//最后生成的打包文件
}
}
3.测试webpack打包
3.1新键index.js这个js文件引进外部js main.js
//index.js
import * as main from './main.js';//引入main.js全部内容并重命名为main
let one = new main.Person('test',19);
one.show();
//main.js
export class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
show(){
console.log(this.name,this.age)
}
}
3.2命令行打包
输入webpack
3.3新键html文件引入刚才打包的js文件 项目目录/build/bundle.js
<script type="text/javascript" src="./build/bundle.js"></script>
这样即完成基本的模块化操作