对ES6模块化的一些理解和整理

前段时间在网上看了一点关于es6模块化的一些资料，

发现很多在es6的介绍里很多都只是介绍了es6的语法，并没有提到编译的过程，所以在这整理一下；

es6的模块化语法很简单；

暴露用export，或export default, 前者将暴露为一个对象，后者为自定义暴露；

引入用import

引入export的模块，用{}解构赋值来按需加载（我记得之前可以用obj.key的方式取值的，可昨天试了下直接用变量接收暴露的模块是个undefind，不知道咋回事，如果我写的有问题还望热心大神同行批评指正）

引入export default 暴露的模块可直接用变量来接收，且接收到的值为暴露的值，即暴露啥东东就接受啥东东。

下面是一个小demo，在src里分别创建两个js，用两种暴露方式，然后用index.js引入

./src/foo.js

let a = '123456';
function foo(){
    console.log('foo()')
}
export {
    a, foo
}

./src/fun.js

function fun1() {
    console.log('fun1()')
}

function fun2() {
    console.log('fun2()')
}

export default {
    fun1, fun2
}

./src/index.js    //index.js 引入两个暴露的模块

import {a, foo} from './foo';
import module2 from './fun';

console.log(a, foo);

module2.fun1();
module2.fun2()

注意这时候在html里引入src/index.js，控制台会报错，因为浏览器对es6这些东西并不全部支持，像import、export这些，他不认识啊，那怎么办呢？

现在要请出第一位大神，babel，简单来说，就是将你的es6的语法转成浏览器认识的es5，

在你的项目路径下

npm init 

//全局/局部安装babel
npm install --save-dev babel-cli
npm install -g babel-cli

//安装babel的转译器,简单来说就是帮babel做事的
npm install --save-dev babel-preset-es2015

//配置.babelrc文件，有的电脑不能直接创建这样空文件名的文件，试试随便给他一个文件名，然后重命名删掉，我是这么解决的;

//至于.babelrc的作用嘛，官网上抄的，哈哈，看看吧
//  1、如果没有.babelrc文件，或者没有在其他文件中设置过babel的presets的配置选型，并且命令行中也            
    //没有配置--presets，那么代码是不会转译的。原es6代码什么样，转译后的代码还是什么样。

    //2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器（presets），代码就会报错

    //3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候，以.babelrc中的配置为准
{
    "presets": [
        "es2015"
    ]
}

这些都做好了，就可以在当前目录下cmd 输入命令：babel src -d lib，

编译完后会生成一个lib文件夹里有三个js文件，文件名和src里一样

估计有的童鞋估计就开始了，引入lib下的index.js，打开控制台运行，结果一段飘红的字体看的人心里一凉

require is not defined？？？

为啥？你不知道，其实浏览器，也不认识这玩意儿，哈哈

所以要请第二尊大神出来browserify，browserify可以把nodejs的模块编译成浏览器可用的模块

直接全局安装就行 npm install -g browserify，这样浏览器就能认识require这些奇怪的东西啦

在当前目录下cmd 输入命令：browserify src/index.js -o src/bundle.js

这样在src文件夹下会生成一个bundle.js的文件

在html里引入这个bundle.js文件就可以正常使用啦

以上内容纯粹个人理解和一些整理，还望各位大神同行批评指正！

对ES6模块化的一些理解和整理

猜你喜欢