ES6环境搭配(一)
一、Node(NodeJS、Node.js)的安装：
1、下载
官网下载地址：https://nodejs.org/en/
2、安装
a、Linux
先将安装包解压,然后进行环境变量的配置即可
b、windows
按照默认步骤安装即可
查看是否安装成功：
a、点击开始菜单查看应用程序
b、打开cmd命令窗口 使用命令 node -v或node --version 可以查看安装版本即安装成功
3、基本使用
执行某js文件代码：
node 文件名或需要执行文件的路径 【文件均为js文件】
二、安装npm包管理工具
1、npm会随着node一起被安装到本地。可以使用以下命令来更新npm
$ npm install npm@latest -g
2、安装淘宝镜像
由于默认npm的仓库在国外，下载起来很慢，可以使用淘宝镜像来加快下载速度。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Registry注册中心
官方：https://registry.npmjs.org
淘宝：https://registry.npm.taobao.org
私有：http://localIP:port
3、修改npm权限
a、windows下执行npm的时候遇到权限不足的情况：
打开cmd命令窗口时使用管理员的身份运行
b、linux下执行npm的时候遇到权限不足的情况：
$ whoami 【当前用户】 $ npm config get prefix 【获取配置参数prefix的值 prefix参数指定全局安装时相关目录的共同路径，即全局安装的根目录】 $ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
三、搭建本地npm仓库(sinopia)
1. 安装
$ npm install -g sinopia
2. 配置
$ npm set registry http://localhost:4873/
3. 添加用户
$ npm adduser --registry http://localhost:4873/
4. 发布模块
$ npm publish <module_name>
5. 启动
$ sinopias
四、使用Babel工具将ES6的代码转换为ES5的代码
1、安装 cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2、Babel工具的使用
⑴、全局安装babel工具
$ cnpm install -g babel-cli $ babel --version
⑵、局部安装转换规则包(一般情况下安装一个即可)
$ cnpm install babel-preset-latest $ cnpm install babel-preset-es2015 $ cnpm install babel-preset-env
⑶、编写babel的配置文件
在项目根目录底下创建文件 .babelrc
{ 'presets':['latest'] }
⑷、编写ES6代码文件 a.js
⑸、转换
babel a.js
3、babel命令
eg：
babel 文件名 将转换的结果输出到终端
babel 文件名1 --out-file 文件名2 【将文件名1中的ES6代码转化为ES5代码并输入到文件名2中(没有该文件会自动创建)】
eg：
babel 1-a.js --out-file dist/2-a.js 【转换时目录及文件应已存在，否则无法复制到指定路径的指定文件中】
babel 目录名1 --out-dir 目录名2 【将目录名1中的所有文件转换为ES5代码并输入到目录名2中(没有该目录会自动创建)】
注：babel工具只转换语法层次
babel-polyfill垫片 ，将ES6的新功能新特性转换为es5代码
五、项目升级
创建package.json文件，项目所需依赖会自动放置在该文件中
在项目底下执行命令【快速初始化一个项目】
$ cnpm init -y //快捷生成package.json文件 $ cnpm init //生成package.json文件过程中可以填写配置文件中一些默认添加的相关信息
package.json文件中记录的是项目相关的信息【若要安装时添加相关依赖到配置文件使用下面添加修饰的命令】
a、dependencies 【产品阶段的依赖】使用下面命令添加依赖
$ cnpm install --save babel-cli
依赖相关信息放置在package.json文件的dependencies中
dependencies:{ babel-cli:'' }
b、devDependencies 【项目开发阶段的需要的依赖】使用下面命令添加依赖
$ cnpm install --save-dev babel-cli
依赖相关信息放置在package.json文件的devDependencies中
devDependencies:{ babel-cli:'' }
1、创建package.json文件【快速初始化一个项目】
$ cnpm init -y
2、下载项目依赖 【使用指定阶段需要的依赖命令添加依赖】
$ cnpm install --save-dev babel-cli babel-preset-latest
或者
$ cnpm install --save-dev babel-cli $ cnpm install --save-dev babel-preset-latest
3、编写babel的配置文件
项目根目录底下新建 .babelrc文件
{ 'presets':['latest'] }
4、新增指令信息
在package.json文件的scripts中添加信息
"scripts":{ ... "start":"babel src --out-dir dist", "dev":"npm run start" }
5、编写创建src文件并在其底下创建文件编写ES6代码
6、将ES6代码转换为ES5代码并将转换后的代码添加到dist目录中【下面六条命令运行一条即可(前提是在步骤4中新增了指令信息)】
$ babel src --out-dir dist $ cnpm run start $ cnpm run dev $ npm run start $ npm run dev $ npm start
项目升级的好处：
1、可以在package.json文件中读取到需要的信息【项目依赖的包以及如何启动项目】
2、拿到没有node_modules的项目，先打开package.json查看依赖
在项目根目录使用下面命令 【下载项目中所有的依赖=>第三方包】
$ cnpm install
