【ES6】001---module模块------【巷子】

00一、前言

什么是模块化开发？

 

为了提升代码的复用度，开发人员会按照功能把大量的js代码分红若干文件，这样在多个页面就可使用同一个文件了。，下面是某个网站的js引用状况

怎么会有这么多js文件引入，吓死宝宝了，那就是网站功能比较多喽，但是咱们知道，

     一、网站加载js时会中止其它资源加载，并中止页面渲染（就是咱们常说的白屏现象）

     二、加载过多的js文件可能形成浏览器假死（浏览器一直在加载，不能进行页面操做）

     三、假如文件有依赖关系，就是使用B.js须要先加载A.js，那咱们还要当心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊

 

额 。。。允许我懵逼片刻，那怎么办呢，网站的功能日益强大，js文件愈来愈可能是必然的的事情，因而出现了模块化开发。

 

 

实现特定功能的js文件称之为  模块 ，有了模块以后，咱们就能更好的管理本身的代码及使用别人的代码了。  将庞大的系统划分红若干个模块去实现的过程 成为 模块化

 

如今的web系统愈来愈庞大、复杂，须要团队分工，多人协做，大型系统的javascript文件常常存在复杂的依赖关系，后期的维护成本会愈来愈高。

 

在ES6以前，javascript还不支持原生的模块化，若是要实现模块化那么就须要借助一些框架好比：require.js或者sea.js。

 

00二、模块module

假设咱们如今有一个module-a.js和module-b.js.咱们将它们视为2个模块

 

首先咱们先了解下什么是模块？

     模块module:模块就是一个对其余模块暴露属性和方法的文件

 

咱们用module-a.js和module-b.js来演示如何暴露属性和方法。

 

首先咱们先要来了解几个方法：

     一、exprot:导出。做为一个模块，它能够选择性的暴露本身的属性和方法，供其余模块使用

 

     二、import:导入。做为一个模块，能够根据须要，引入其余模块提供的属性和方法，供本身的模块使用

 

00三、导入导出模块的属性和方法

在模块B中咱们用关键字export对外暴露了一个属性name1，接下来咱们看模块A如何接受这个属性

 

00四、导入模块module-b

咱们使用关键字import导入模块B中的name1属性，而且赋值给变量name1.关键字from的做用是指向你想要引入的模块

 

00五、批量导出

对于属性和方法咱们能够批量暴露出去

 

推荐使用批量导出：

    

     当对外暴露的属性和方法较多的时候，这种方法能够更直观的看出当前模块暴露哪些变量

 

00六、批量导入

注意：

     批量导入的时候变量名必须跟导出的一致才能准确获取，位置顺序无要求

 

00七、重命名导入的变量

关键字as:关键字as能够实现变量名更改

 

     用法：变量名 as 更改的变量名

 

 在export里面修改 和 import里面修改均可以

 

00八、总体导入

使用*将模块里面的全部属性和方法总体导入赋值给一个变量。就至关于给一个对象添加了属性和值

 

 

00九、默认导出

每个模块都支持咱们导出一个没有名字的变量，咱们可使用关键字 export default来实现

 

 

0十、注意事项

a、声明基本变量对外只能读取不能修改

b、若是导出的是对象，则能够修改

c、导入不存在的值 那么值就是undefined

 

webpack将es6代码转为es5代码

 

00一、安装webpack

全局安装

 

npm install webpack -g

 

00二、局部安装相应插件

npm install webpack --save-dev npm install --save-dev babel-loader babel-core npm install babel-preset-es2015 --save-dev

 

00三、在根目录建立文件.babelrc文件

在命令行中: echo { presets: ["es2015"] }> .babelrc 在根目录建立.babelrc文件并写入{presets: ['es2015']}

00四、配置webpack.config.js

module.exports = {

    entry:{

        main:"./es6/main.js"

    },

    output:{

        path:__dirname,

        filename:"./es5/[name].js"

    },

    module: {

        loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ]

    }

}

00五、运行webpack