zoukankan      html  css  js  c++  java
  • 在webstrorm中配置好es6 babel【更新:在webstorm中配置.vue和.vue文件中支持es6】

    第一步:全局安装babel-cli

    npm install -g babel-cli

    第二步,新建一个空项目,在 WebStorm 中的当前项目中打开 Terminal,进入项目的根目录下,

    安装 ES2015 preset,ES2015 preset会自动转译那些需要转换为 ES5 的 ES6 代码。

    npm install --save-dev babel-preset-es2015

    如图:


    第三步:根目录路径下新建.babelrc文件,内容如下

    {
       "presets": ["es2015"]
    }

    第四步新建const.js,写入es6,发现页面报错,将JavaScript语言版本切换为ECMAScript6

    点击File —>settings,弹出设置框。把js的版本设置为: ECMAScript 6  ,勾选prefer strict mode这项。

    第五步:  紧接着配置javascript的下的选项, 并点击apply启用。并点击OK按钮。

    第六步: 配置 File Watchers 实现自动转译。第三步配置完,就出现了下面的提示。【如果没有出现,就手动add watcher】

    第七步: 点击上面的Add watcher,【如果没有出现第三步的提示,则可以通过,file->settings-tools-file watcher来进行添加Babel】弹出如下窗口,点击OK.【配置 WebStorm 的 File Watchers 以实现自动转译我们编写的 ES6 代码。】

    此处注意修改arguments的配置

    • Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$

     第七步 发现const.js下出现compile.js文件,查看生成的compile,发现已经生成成功,如下:说明已经成功了,可以进行es6的学习,并查看转码后的代码

    1、配置.vue文件的快捷创建

      ①、File——》settings——》plugins,安装vue.js插件。

    ②、创建新建.vue文件的模板

    ③、结果:可以通过File——》New,创建.vue文件,生成下图模板

    2、使.vue文件语法高亮

     3、.vue支持es6语法

  • 相关阅读:
    nginx 负载均衡
    nginX 安装 启动
    nginx 简介
    使用ASDM 管理 ciscoASA设备
    OSPF配置实验(一)
    VRRP
    HSRP 详解
    Rip 动态路由协议
    配置ASA防火墙 远程管理方式
    Oracle 重启监听
  • 原文地址:https://www.cnblogs.com/lee90/p/5817943.html
Copyright © 2011-2022 走看看