ES6模块化规范

目录

1 初始化项目

2.安装转码工具

全局安装  babel

3安装预设：/es5

查看babel

4.安装转换规则

5.指定转换规则 新建.babelrc文件​编辑 内容如下：

可以将ES6转换为ES5之后的文件输入到另一个文件当中

将整个src目录下的es6文件转换成es5文件到dist目录

将es6代码转换为es5代码

ES6模块化规范

    导出:

        1.列表导出 export {变量}

       2. 重命名导出 export {变量名 as 新变量名}

       3. 导出单个属性

       4. 默认导出 一个模块只允许有一个默认导出

    导入:

        1.列表导入

        2.重命名导入    

        3.导入单个属性

        4.导入默认导出内容

        5.导入export和默认导出的内容 导入有export导出和默认导出的对象变量属性

先转码  babel src --out-dir dist

​编辑

在运行node dist/xxx.js

CommonJs模块化规范

    导出:

    导入:

 ES6 与commonjs  区别?

    1.commonjs在运行时候加载模块,ES6编译的时候加载模块;    2.commonjs输出的是一个值的复制/深拷贝,ES6输出的是一个值的引用;

commonjs

    导出模块:

 导入模块: 

    ES6模块化输出:

导入模块:  

包管理工具/机制

npm cnpm yarn下载依赖 下载第三方工具库 引入框架...

npm

cnpm

yarn

---

转码 将高版本代码转化为低版本代码

1 初始化项目

npm init

npm init -y   //快速初始化项目

2.安装转码工具

全局安装  babel

cnpm install -g babel-cli

3安装预设：/es5
 

cnpm install --save -dev babel-cli babel-preset-latest  

查看babel

babel --version  

4.安装转换规则
 

cnpm install -g babel-preset-latest

5.指定转换规则 新建.babelrc文件
内容如下：

{
    "presets":["latest"]
}

cnpm install --save-dev babel-cli babel-preset-latest

可以将ES6转换为ES5之后的文件输入到另一个文件当中

babel 1-xxx.js --out-file 2-xxx.js

将整个src目录下的es6文件转换成es5文件到dist目录
 

babel src --out-dir dist

将es6代码转换为es5代码
 

babel xxx.js

ES6模块化规范

    导出:

        1.列表导出 export {变量}

// ES6模块化导出 
let firstName='Li';
let lastName='lili';
// 1.导出方式 列表导出
export {firstName,lastName};

       2. 重命名导出 export {变量名 as 新变量名}

// ES6模块化导出 
let firstName='Li';
let lastName='lili';
// 2.重命名导出
export {firstName as first,lastName as last};

       3. 导出单个属性

       

        export let a=1;
        export function get(){};

       4. 默认导出 一个模块只允许有一个默认导出

     

   export default {
            变量
        }



        export default func