es6新特性之模块化开发

以往我们是直接引入一些外部的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 default
• let 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>

这样即完成基本的模块化操作