ES6环境搭配

Posted 2022-07-09 nzcblogs

一、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