• 在IDEA(phpStorm)中使用Babel编译ES6


    安装Babel

    官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植、更易于安装。
    在项目的根目录下使用命令行工具(CMD等)执行下面代码

    npm install --save-dev babel-cli
    

    安装编译规则

    官方提供了几套预设的规则集,分别适用于 ES2015、React 和 ES7 的一些实验性特性。我们可以根据需要安装(如果只需要学习 ES6 语法的话,就只选 ES2015 好了)。

    # ES2015转码规则
    npm install --save-dev babel-preset-es2015
     
    # react转码规则
    npm install --save-dev babel-preset-react
     
    # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
    npm install --save-dev babel-preset-stage-0
    npm install --save-dev babel-preset-stage-1
    npm install --save-dev babel-preset-stage-2
    npm install --save-dev babel-preset-stage-3
    

    .babelrc 文件配置

    (1)在项目根目录下创建一个 .babelrc 文件。注意:Windows 系统无法直接创建这样的文件,我们可以借助命令行、或者代码编辑器来创建。
    (2)该文件中输入如下内容来启用预设(假设我们用到了 ES2015 这一个转码规则)。

    {
        "presets": [
          "es2015"
        ],
        "plugins": []
    }
    

    好了,现在Babel的安装告一段落,接下来开始在phpStorm中设置Babel的配置了

    在IDEA(phpStorm)中设置Babel

    1.首先在Settings->Languages & Frameworks中选择JavaScript选项,然后将右侧JavaScript的版本设置为ECMAScript6

    2.然后在搜索框中搜索File Watcher,点图中的加号按钮,选择babel就会弹出一个New Watcher窗口

    3.在Program这项里面放入babel.cmd文件的入径,我的路径是(E:devphpStudyPHPTutorialWWWjinzhai ode_modules.binabel.cmd)

    4.将Arguments项里面的代码替换成$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015,点击OK,应用即可

    使用

    在项目中新建test.js文件编写ES6语法的代码,在根目录下会自动生成dist文件夹及对应的编译后的ES5文件

    祝使用愉快。

  • 相关阅读:
    CSS关键词的值-currentColor关键字提示文字(当前颜色)
    DOM 对象方法
    CSS三种样式表
    html页面不使用缓存的代码
    DOM-----style属性对照表
    UISwitch属性
    UIImageView属性
    UIView属性
    UIScrollView
    UILabel属性
  • 原文地址:https://www.cnblogs.com/wyangnb/p/9400230.html
Copyright © 2020-2023  润新知