zoukankan      html  css  js  c++  java
  • 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



  • 相关阅读:
    文件的操作
    encode,decode,str,bytes
    字符串操作
    suse12安装mysql8.16
    VMware配置共享磁盘安装RAC
    Linux过滤文本并显示过滤文字的上下文
    Linux服务器卸载mysql指南
    oracle 各版本各日志存放位置
    impdp按用户导入
    数据泵expdp定时备份
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11348777.html
Copyright © 2011-2022 走看看