ES6模块化总结

安装node

上官网下载，版本是长期支持版  node-v10.16.0-x64.msi

本机安装包在E：Node下

安装时候默认安装，路径也默认在C盘，不改，避免后面出问题。

命令行基本指令

快速打开命令行：shift+鼠标右键

清屏：cls

找到之前的指令：上下方向键

创建文件夹：mkdir 文件夹名字

删除文件夹 ：rmdir 文件夹名字

cd +路径 跳转到指定路径   盘符：跳转到指定盘

node +文件名字 在node环境下执行该文件

创建文件步骤

1. 打开cmd；（如果想在当前目录下打开，按住shift键，右键打开）

2. 初始化：npm init   会出现package.json文件。

3. 下载文件：npm install 文件名（如jquery BootStrap）下载完成后，会出现node_modules文件夹，里面就是下载的文件。

安装babel

按照上面创建文件步骤初始化之后，执行下面操作：

（1）本地安装

npm install --save-dev babel-cli 安装命令行（执行babel命令行执行，进行编译）

（2） npm install --save-dev  babel-preset-es2015 安装将ES6转换成ES5依赖包

（3） 在package.json文件同级创建配置文件(.babelrc )

cmd命令：cd .>.babelrc

在HBuilder中打开编写：

{                      

"presets": ["es2015"],

"plugins": []

}

（4）在package.json文件同级创建src文件夹，用于存储js文件，比如

（5）各个js文件中，可以定义变量，函数等如：

注意前面要有export，用于导出文件

（6）在main.js中就需要引进其他js，使用import { } from ‘./a.js’:

其中，变量名跟export的变量名要一致，如果重名，可以取别名

（7）将es6打包成es5

方法一：

可以直接进入到node_modules的bin目录下执行：

babel ../../src –d ../../dist

就会生成一个dist文件夹，里面是转化后的js文件

注：进到bin目录下，是因为在bin目录下才能执行babel命令，而../../是因为src相对于bin目录是上两级的目录。

方法二：

因为上面那种方法很麻烦，所以我们可以配置环境变量，变得简单一些。将一直到bin目录的路径复制，配置成环境变量，这样执行的时候就会根据环境变量进行寻找。

系统属性---高级系统设置---环境变量---系统变量中的Path，记得不要修改其他的变量，直接在最后面加 ;和路径就好。

配置好环境变量之后，就可以直接在文件夹直接执行：

babel src –d dist

方法三：

上面两种方法还是很麻烦，所以我们可以创建快捷方式，在package.json里面添加"build":"babel src -d dist"。

接下来我们就可以直接使用npm执行了：

npm run build  build需要跟上面的文件中一致。

以上就是全部了！！希望能有所帮助！！