ES6环境搭配(一)
阅读原文时间:2023年07月15日阅读:1

一、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&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 

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&nbsp;&nbsp;&nbsp; 

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"  
}&nbsp; 

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