【Node.js和模块化】ES6

傷城~ 2021-11-29 09:24 364阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]  
非商业用途自由转载，保持署名，注明出处！**

--------------------

### 文章目录 ###

*  1.问题
 *   *  1.1 暴露方式
     *  1.2 导入导出
 *  2.举例
 *   *  2.1 初始化
     *  2.2 环境配置
     *  2.3 编写代码
     *  2.4 编译转换

# 1.问题 #

*  依赖模块需要编译打包，2个原因：1.考虑浏览器支持问题，需要用Babel转换为ES5；2. 浏览器并不认识require语法，需要用Broserify，参考[【Node.js和模块化】CommonJS][Node.js_CommonJS]
 *  学习教程：[ECMAScript 6 入门，作者：阮一峰][ECMAScript 6]

## 1.1 暴露方式 ##

*  分别暴露：

export function foo1() { }
    export let arr = [];

*  统一暴露

export {  fn1, fn2 };

*  默认暴露：可以暴露任何数据类型，暴露的数据=接收的数据，只能写一个default

export default () => { };

*  暴露多个属性

export default {
    	name: 'hyo',
        foo() {}
    }

## 1.2 导入导出 ##

1.导出模块：export  
2.引入模块：import xxx from ‘路径’

# 2.举例 #

## 2.1 初始化 ##

![在这里插入图片描述][20190722085541338.png]

## 2.2 环境配置 ##

*  安装babel：  
    步骤1：进入工程目录（最外的文件夹）：npm init -y  
    步骤2：安装几个包，npm i @babel/core @babel/cli @babel/preset-env -D  
    (几个包分别是：核心库 命令行接口（提供必要的命令） 预先设置好的配置) npm安装很慢，用cnpm ！  
    步骤3：在package.json中的“script”中添加“build”（名字自定义）：“babel src -d dist” 若需要编译的js文件在文件夹src，让输出的文件存放在文件夹dist  
    步骤4：工程目录下的文件.babelrc,内容

{
    "presets":["@babel/preset-env"]
    }

详细参考：[ES6笔记】基础以及babel的环境配置][ES6_babel]

*  安装browserify：

cnpm install browserify -g

## 2.3 编写代码 ##

*  4个module.js分别采用上述的暴露方式
 *  main.js导入模块并调用

## 2.4 编译转换 ##

*  ES6转换成ES5

cnpm run build

*  利用Browserify编译打包 dist目录下的 ES5 文件

browserify dist/main.js -o dist/main2.js

*  index.html中引入main.js

--------------------

**如有不当之处，欢迎指正!  
谢谢！**

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[Node.js_CommonJS]: https://blog.csdn.net/qq_34243694/article/details/96727749
[ECMAScript 6]: http://es6.ruanyifeng.com/#docs/module
[20190722085541338.png]: /images/20211129/2555ce8ad2cc41e0a5994ee193453197.png
[ES6_babel]: https://blog.csdn.net/qq_34243694/article/details/96432974