ES6的模塊化谢肾，目前為止(2017-2-24)瀏覽器兼容還不是太好浦马，需要使用babel進(jìn)行編譯
babel+webpack配置:
webpack.config.js的代碼如下:
module.exports = {
entry: './index.js', //入口文件
output: {
filename: 'build.js' //出口
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //排除那些目錄
}]
}
};
.babelrc文件的配置
{
"presets":[['es2015']]
}
下載相應(yīng)的模塊
npm install babel-loader babel-core babel-preset-es2015
webpack -w運(yùn)行
ES6里面模塊化的使用方式
模塊: 定義(導(dǎo)出) 和 引入(導(dǎo)入)
以下例子,導(dǎo)出模塊放在 mod.js里面
以下例子,導(dǎo)入模塊放在 index.js 里面
-
第一種書(shū)寫方式
mod.js代碼(一個(gè)一個(gè)導(dǎo)出)
export let a = 12; //導(dǎo)出普通值 export let b = 5; export let json = { //導(dǎo)出json a, b }; export let show = function() { //導(dǎo)出函數(shù) return 'welcome' }; export class Person { //導(dǎo)出類 constructor() { this.name = '123'; } showName() { return this.name; } }index.js代碼
import { a, b, json, show, Person } from './mod' console.log(a, b, json, show, Person); -
第二種書(shū)寫方式
mod.js代碼
let a = 12; let b = 5; let c = 10; export { a, b, c as cc //as是別名，使用的時(shí)候只能用別名 }index.js代碼
import { a, b, cc // cc是導(dǎo)出的殊校，as別名 } from './mod' console.log(a, b, cc); -
第三種 default方式
default方式的優(yōu)點(diǎn)撩幽，import無(wú)需知道變量名，就可以直接使用
mod.js的代碼
export default function() { console.log('welcome to ES6 modules') }index.js的代碼
import aa from './mod' aa(); //或者 //import aa as cc from './mod' //as用來(lái)起別名 //cc()小總結(jié): 導(dǎo)出模塊如果用default了箩艺，引入的時(shí)候直接用，若沒(méi)有用default宪萄，引入的時(shí)候可以用{}的形式
有了default的方便之處,以后:
import $ from './jquery-3.1.1' //使用 $(function(){ $('body').css({ background:'#ccc' }) })像這樣引入模塊就顯的非常省事了艺谆。
-
總結(jié)export和import的用法
-
export的用法
//1. export let a=12; export let b=5; //2. let a=12; let b=5; export {a,b} //3. let a=12; let b=5; export {a as aa, b as bb} //4. export default { a:12, b:5 } //5. export let fn1=function(){} export let fn2=function(){} -
import的用法
//1. import {a,b} from './mod' //2. import {a as aa, b as bb} from './mod' //3. import {aa,bb} from './mod' //4. import json from './mod' //5. import * as fn from './mod' //* 用來(lái)加載所有模塊手邊有電腦，就稍微跑一遍試試吧拜英，如果沒(méi)有静汤，就暫時(shí)記住語(yǔ)法規(guī)則嘍!
-
