前端es6模块化学习入门

大家都知道后台开发过程中分为controller、service、mapper等包，作用就是不同的包写不同的智能代码，类似于后端这样前端也有模块的概念，只不过前端是js之间的调用。

下面以es6来演示模块间的调用：

一、模块化调用

我新建两个js,分别是01.js、02.js ,通过02.js来调用01.js中的方法

01.js的代码如下所示：

 

代码中export default{ } 中的方法就是暴漏出去的方法，只有暴漏出去才可以被调用

下面就是02.js的代码，看下是怎么样调用01.js中的方法：

想要调用01.js,首先就是导入01.js ,取一个别名，通过别名调用方法。

那这样写到底可以调用得到吗？我运行一下02.js试一下：node 02.js 运行

会发现报错了......

 这是为什么呢？

注意：该报错是因为es6的模块化无法在node.js中执行，需要用Bable编辑成es5后再执行；下面进行转换一下

二、Bable转码器

bable转码器将es6模块化代码转为es5

首先需要安装bable，bable提供了bable-cli工具，用于命令行转码，安装命令如下：

npm install -g babel-cli

####查看是否安装成功

babel  --version

然后配置.babelrc,存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则，如下所示：

   {

    "presets":["es2015"],

    "plugins":[]

    } 

接下来就是安装转码器(安装上面babel和转码器都是在根目录moudleDemo下执行)： 

npm install -D babel-preset-es2015

 最后一步就是转码：babel src -d dist  // 整个src目录转码，--out-dir或-d 参数指定输出目录

也就是将src里面的转码后放到dist目录中，所以我先新建一个dist文件夹

然后执行命令： babel src -d dist （执行前切记要保存一下.babelrc文件）

dist文件夹下面也有了这两个文件：

 

然后终端再执行02.js :node 02.js

 

可以看到成功调用到01.js中的方法了