【Node.js和模块化】ES6

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

---

1.问题

• 依赖模块需要编译打包，2个原因：1.考虑浏览器支持问题，需要用Babel转换为ES5；2. 浏览器并不认识require语法，需要用Broserify，参考【Node.js和模块化】CommonJS
• 学习教程：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 初始化

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的环境配置

• 安装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

---

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