博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Webstorm/Phpstorm中将ES6文件转为普通js文件
阅读量:7088 次
发布时间:2019-06-28

本文共 742 字,大约阅读时间需要 2 分钟。

hot3.png

前言:

       我写此篇文章是为了在比较老旧的项目中书写es6代码,例如fis项目、非webpack架构的JQuery项目等等,如果你是vue + webpack项目,请无视这篇文章:)

用web/phpstrom写老旧项目用es6的步骤:

1.打开phpstorm的命令行,运行命令:

npm install -g babel-cli

 

2. 在当前项目中安装

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

 

3.在File-settings-Tools-File Watcher中:

 点击+号

8a67ca64d56f0eb9cdde864d4bdb25de8d6.jpg

1f82794f26f219dc6727fd3a1388dde3ac9.jpg

File Type:配置该监听器监听的文件类型,可以在Preferences > Editor > File types中配置Scope:配置该监听器的监听范围,可自定义新的范围,也可以使用Preferences > Appearance & Behavior > ScopesProgram:babel的安装位置Arguments:命令执行参数,参见Babel CLIWorking directory:babel命令执行的位置,默认为文件所在目录

我在此处是将后缀为.es6的文件进行编译,设置--out-dir ./ 设置输出目录为在当前.es6相同的目录中,然后在html中引入的是.js后缀的es5文件就可以愉快的写es6了

4.  .babelrc文件

   我们可以通过在根目录设置.babelrc文件去配置babel编译的结果

    2e3fd2d6480aea023ae33c58599d719630c.jpg

参考: https://blog.csdn.net/zhoubo5692/article/details/78414713

 

转载于:https://my.oschina.net/jamesview/blog/1924356

你可能感兴趣的文章
[sqllite]c语言操作sqlite一: 连接sqlite数据库
查看>>
Scintilla and SciTE
查看>>
学习之路十五:C#基础知识简单梳理
查看>>
最近很忙
查看>>
Html中table显示空单元格的方法及table标签属性总结
查看>>
WPF 获取文件运行目录
查看>>
使用emma对web工程进行测试覆盖率检查
查看>>
android activity生命周期
查看>>
距离和相似度度量[转]
查看>>
mysql在创建存储函数时报错
查看>>
ADO.net DataTable 和Amazon SimpleDB的相互转换
查看>>
【英语天天读】Choose Optimism
查看>>
恢复Ext3下被删除的文件(转)
查看>>
Direct3D 开发之旅 3D 游戏基本概念的介绍1
查看>>
sc windows服务常用命令
查看>>
如何使用ftp从Metalink上下载补丁
查看>>
Oracle 中int , number的区别
查看>>
shell循环语法
查看>>
ORACLE SQL:经典查询练手第五篇
查看>>
ABAP-Note002
查看>>