如何在 webStorm 中使用pm2 babel node-node 调试 ES6代码

nodejs支持ES6语法(BABEL) - dandan_feifei的博客 - CSDN博客
nodejs支持ES6语法(BABEL)
让nodejs支持ES6语法配置步骤:
1.在使用Babel之前,可以使用es-checker检测一下node对ES6的支持情况
npm install es-checker -g
安装完毕后执行:
es-checker
2.在你的node文件夹内,打开命令窗口执行
生成一个package.json文件,或者自己建一个package.json文件
然后依次安装:babel-cli
babel-preset-es2015
npm install babel-cli –save-dev
npm install babel-cli -g
npm install babel-preset-es2015 –save-dev
在项目目录内创建一个名字为.babelrc的文件,文件内容为:
“presets”: [
“es2015”
“plugins”: []
接下来可以执行命令 babel-node
文件名字,就可以测试是否支持ES6语法了。
需要支持async/await
还需要安装:
npm install babel-core –save
npm install babel-preset-stage-3 –save
“presets”: [
“es2015”
“plugins”: [“stage-3”]
在顶层代码文件中引入 Babel 模块:require(“babel-core/register”);
在这句话后面引入的模块,都将自动通过babel编译,但当前文件不会被编译。另外需要注意node.js的版本,如果是4.0以上的版本则默认支持绝大部分ES6,可以直接启动。但如果是0.12左右的版本,就需要通过执行
node -harmony
来启动才能够支持。
3.打开webstorm测试时,发现写的ES6语法都报错,可以按照下面配置
到此为止配置ok。
我的热门文章WebStorm ES6 语法支持设置 - 简书
WebStorm ES6 语法支持设置
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。
作为一只猴子,我也想尝试一下ES6有什么新特性,于是开始了学习之路。
在webstorm写下了这段代码,体验一下ES6语法的便利,但是一大堆报错
各种语法错误
what the fuck
相信每一只程序猴都不想在这样的环境下编码,反正本猴不想
1 语法支持设置
Preferences & Languages & Frameworks & JavaScript
这里只要配置ECMAScript版本即可
2 自动转码为ES5
file watcher + (ES6转码器)
你可能希望你写的代码有更好的兼容性,但目前的ES6肯定不是所有浏览器都支持的,所以我们要用到ES6转码器。是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。
而且你还希望每次修改代码时能自动转码,所以还要用到webstorm的file watcher(当然还有其他解决方案)
npm install -g babel
Preferences & Tools & File watchers
点击“+”按钮
file watcher配置界面
File Type:配置该监听器监听的文件类型,可以在Preferences & Editor & File types中配置Scope:配置该监听器的监听范围,可自定义新的范围,也可以使用Preferences & Appearance & Behavior & ScopesProgram:babel的安装位置Arguments:命令执行参数,参见Working directory:babel命令执行的位置,默认为文件所在目录
这样对文件做修改会随时生成编译成ES5的文件以及sourceMap文件47被浏览18646分享邀请回答01 条评论分享收藏感谢收起在webstorm上利用babel实现自动编译es6文件 - CSDN博客
在webstorm上利用babel实现自动编译es6文件
1.在webstorm中创建项目.
2.在项目的根目录下创建package.json &
&name&: &test-project&,
&version&: &1.0.0&
3.打开webstorm的Terminal (快捷键alt+f12),安装babel-cli.(需要先安装node.js)
npm install --save-dev babel-cli
4.File--&Settings--&Languages&Frameworks--&JavaScript & &JavaScript language version 选择ECMAScript 6.
5.File--&Settings--&Tools--&Files Watchers 中加上Babel
6.将Files Watchers 中 Babel 中的Program 改为$ProjectFileDir$\node_modules\.bin\babel.cmd & (windows中)
7.在Terminal中,安装babel的ES6的preset
& &npm install --save-dev babel-preset-es2015
8.在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),我创建的是babel.babelrc
&presets&: [
备注:我在项目中将Files Watchers 中 Babel 中
& & & & & &&File type:JavaScript 更改为 JSX Harmony
& & & & & &&Arguments:--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$更改为--source-maps --out-file $FileNameWithoutExtension$.js --presets es2015 $FilePath$
& & & & & &&Output paths to refresh :$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map更改为$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
参考:/question/
& & & & & & & & & &
本文已收录于以下专栏:
相关文章推荐
1、官网下载webstorm最新版安装到自己的电脑上(Activity Code中给出序列号);
2、关于git的配置:
【1】下载并安装git;
【2】File-Setting搜索git,在G...
babel官方网址
npm i babel-cli -g
通过上面命令进行babel的安装,其中i表示安装install的意思, -g表示安装到全局
创建文件...
一、设置Webstorm支持ES6
在 Settings -& Languages&Frameworks -& JavaScript 里设置为 ES6 。
二、设置ES6自动转码成ES5
网上有很多关于如何设置babel的。我学习着设置,但总差那么几步,没能满足我的需求。
我使用的是webStorm2017.1版本。
babel安装准备
使用webStorm自带的filew...
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
ES6的目标,是使得Jav...
node对es6兼容程度不断提高,书写也不会受到限制注意:低版本的node对es6支持不是很好,测试的话会出现很多问题,建议升级node版本,windows的用户估计要到网站下载安装才能升级附网址:h...
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript
ES6的目标,是使得Jav...
在终端下进入项目根目录,执行 npm init,一路回车下去
然后发现项目目录下多了一个”package.json”文件第二步
安装babel-clisudo npm install -...
cnpm i babel-preset-env --save-dev
为什么是TypeScript最近在做H5的游戏,最终选定的TypeScript作为开发语言。主要是看重他有强类型和Class,作为习惯使用AS3,Java等强类型编程的人来说,还是习惯这种编程写法。听...
他的最新文章
讲师:宋宝华
讲师:何宇健
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)Posts - 270,
Articles - 0,
Comments - 2047
20:34 by 破狼, ... 阅读,
在 2 月 20 号 ECMAScript 第六版就正式推出了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受。不过要想在浏览器端或者 Node 端直接运行 ES6 代码还得等上一些日子。幸好 TC39 (负责研究开发 EMCAScript 规格的组织) 做了大量工作让我们现在可以使用 ES6 中的大部分特性了。
能够实现 ES6 到 ES5 的代码转换多亏了
(以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaScript 引擎中。
我们这里目前在使用 Babel,主要是因为它对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的。
在用 ES6 标准开始一个新项目的时候我们会建立一个目录结构来确保用 ES6 编写的代码能和编译出的 ES5 代码区分开。原始的 ES6 代码我们放在 src 目录下,而编译好的文件就是 lib 目录。这样的命名我们会在本文一直使用。(补充一点,lib 目录应该被加入 .gitignore 文件中)
安装 Babel
如果你还没安装 Babel 可以使用 npm 来安装:
npm install -g babel
Babel 一旦安装完成就可以开始编译你的 ES6 代码了。再确认一遍你已经在 src 目录放入了一些 ES6 文件,下面的命令将会把这个目录下所有 .es6, .es 和 .js 后缀的文件编译成符合 ES5 规范的代码到 lib 目录下:
babel -d lib/ src/
如果你想在文件有改动的时候自动完成这些编译工作可以使用这些常用的 JavaScript 构建工具:,
给 ES6 标准库一个&腻子&
Babel 作为一个源到源的编译器不可能呈现所有 ES6 标准库中的新特性,例如 Map 和 Set 构造器和 Array 下的一些新方法。要使用这些我们需要一个&腻子&来填补这些不足。现在有很多 ES6 的腻子比如 core-js,它适用与 Node, io.js 和浏览器。
译者注: 本节原始标题为 Polyfilling the standard library,术语 polyfill 来自于一个家装产品Polyfilla:
Polyfilla 是一个英国产品,在美国称之为 Spackling Paste (刮墙的,在中国称为腻子)。记住这一点就行: 把旧的浏览器想象成为一面有了裂缝的墙.这些 polyfill 会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁 (浏览器)
编写 ES6 代码
现在构建 ES6 代码的工具已经备齐了那我们就开始真正有趣的部分。我们不会过多着眼于某个新特性,如果你有需要可以阅读
我们先在 src 目录下创建一个叫 person.es6 的文件:
import 'core-js/shim';
export default class Person {
constructor( name ) {
this.name =
sayHello() {
return `Hello ${ this.name }!`;
sayHelloThreeTimes() {
let hello = this.sayHello();
return `${ hello } `.repeat(3);
在这个很简单的例子中我们用了数个需要 Babel 来解决兼容性的语法,还有一个新的方法 String#repeat 须要由 core-js 处理。你可以用本文开头给出的 Babel 命令行代码或者用
得到运行结果。
发布到 npm
目前为止我们可以编写、编译和运行 ES6 代码,不过你也许还想把你的代码发布到 npm 上。你显然不能直接发布然后期望每个人都来自己编译一次。
幸好,npm 允许你在发布前用
选项来修改,这个特性在 CoffeeScript 项目中已经被广泛使用了。
现在把 package.json 文件加入到项目根目录中:
"name": "person",
"version": "0.1.0",
"scripts": {
"compile": "babel -d lib/ src/",
"prepublish": "npm run compile"
"main": "lib/person.js",
"dependencies": {
"core-js": "^0.6.0"
"devDependencies": {
"babel": "^4.6.0"
注意这个 compile script 会直接运行你在右边提供 Babel 命令,这样你就可以直接运行 npm run compile 来编译而不需要键入文件目录了,而 prepublish script 会在你每次执行 npm publish 的时候自动运行。
还有就是为什么 Babel 会被加入 development dependencies 中,这样如果有人想参与这个项目就不用全局安装 Babel 了,npm 会把你项目下包含可执行文件的 node_modules 目录加入到系统环境变量 path 中。
.npmignore 文件
最后你需要确保发布的是编译出的文件而不是原始的 ES6 文件。如果你的项目根目录有 .gitignore 而没有 .npmignore 那 npm 就会自动忽略你项目中包含在 .gitignore 里所有的 文件和目录。添加 .npmignore 这样你发布的包里就是编译好的文件:
编写 ES6 代码并使用源到源的编译器如
来转换成标准 ES5 代码 使用 ES6 标准库腻子如
记得在发布到 npm 的时候添加 .npmignore 文件 你可以在我们的
项目中看到一个完整的例子,这个项目是我们用于更新和新建 CouchDB 设计文档的简单脚本。
原文: 翻译自}

我要回帖

更多关于 node babel es6 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信