zoukankan      html  css  js  c++  java
  • 安装es6编译babel

    1、它的安装命令如下。

    全局安装 :$ npm install --global babel-cli
    项目下安装: $ npm install -g babel-cli --save-dev

    2、配置.babelrc文件

     这个文件配置的是编译es6的规则,配置如下:

    {
    "presets": [
    "es2015",
    "react",
    "stage-2"
    ],
    "plugins": []
    }

    3、转码规则:

    # 转码结果输出到标准输出
    $ babel example.js
    
    # 转码结果写入一个文件
    # --out-file 或 -o 参数指定输出文件
    $ babel example.js --out-file compiled.js
    # 或者
    $ babel example.js -o compiled.js
    
    # 整个目录转码
    # --out-dir 或 -d 参数指定输出目录
    $ babel src --out-dir lib
    # 或者
    $ babel src -d lib
    
    # -s 参数生成source map文件
    $ babel src -d lib -s

    实时监测es6文件

      babel ECAMscript2015.js --watch -o ECAMscript20151.js

    上面代码是在全局环境下,进行 Babel 转码。这意味着,如果项目要运行,全局环境必须有 Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的 Babel。

    4、用npm init 创建package.json,修改其配置如下:

    {
    "name": "es6",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "devDependencies": {
    "babel-cli": "^6.0.0"
    },
    "scripts": {
    "build": "babel src -d lib"
    },
    "author": "",
    "license": "ISC"
    }

    5、执行

    $ npm run build
    就能转译啦
  • 相关阅读:
    Android x86 镜像分析之四
    Android x86 镜像分析之三
    Android x86 镜像分析之二
    Android x86镜像分析
    tizen镜像制作
    完成登录与注册页面的前端
    JavaScript 基础,登录前端验证
    CSS实例:图片导航块
    导航,头部,CSS基础
    web基础,用html元素制作web页面
  • 原文地址:https://www.cnblogs.com/leiyangs/p/7127834.html
Copyright © 2011-2022 走看看