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>

這樣即完成基本的模塊化操作