babel的编译过程
⑴ webpack 怎么直接实时编译输出文件
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。react安装当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。#npminstallreactreact-dom–savereact安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。react解析器babel安装babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安装#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安装一般情况下我们选择本地安装，这样便于管理。打包工具webpack的安装同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。#npminstallwebpack–save-dev//本地安装#npminstallwebpack–g//全局安装如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。这里我们选择全局安装。这样才能出现我们将要说的问题。webpack配置文件编写安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。代码一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}编译过程中出现的错误好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。接下来我们就要编译打包我们的项目。#webpack执行该命令以后，你会发现出现如下的错误：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……这也就是说找不到babel-preset-react。好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。解决问题的方式出现上述问题以后，我们有这样三种方式可以解决。方式一要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。query:{presets:['react']}好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安装的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安装没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。方式二此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//将webpack安装到本地位置——也就是项目目录下的node_moles中#ln–s/项目根目录/node_moles/webpack/bin/webpack.js/usr/bin/webpack//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）//这样我们就可以在任意位置直接使用webpack命令了。此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。方式三该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。代码二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}
⑵ 怎么在webstorm上利用babel实现自动编译es6文件
针对上面一些同学说的不会生成文件的问题：请检查File-Watchers中Babel的Arguments，有一项presets的设置，把他更改为=es2015,详细设置如下：$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015如果还不行，请安装上面提示的安装babel-cli和babel-preset-es2015到项目本地
⑶ 如何用babel来编译ES6的代码
习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～
一句话总结：用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码
我是这么配置的..就先新建一个Empty Project，然后在src目录下新建了一个main.js；
// 这一步不是必须的 只是刚上手的话 从空项目开始自己配置会少很多干扰
Then..进入设置，把JavaScript language version改成ECMAScript 6；
再Then..写一段ES6代码
'use strict';
// node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错
// 这是没有严格模式时候的错误提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);
现在IDE会出现一个File watcher提示条
先别点Add watcher！我们要先去装babel～
首先在根目录新建一个package.json
{
"name": "test-project",
"version": "1.0.0"
}
然后打开IDE的Terminal，安装babel-cli
npm install --save-dev babel-cli
Good! 现在可以去点Add watcher啦，点完之后会弹出一个框，其中大部分设置IDE都帮你搞定了
下面第三行，Program那一项，填
$ProjectFileDir$/node_moles/.bin/babel
然后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦
但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）
所以我们需要安装Babel的preset以正确识别ES6代码；
和刚才一样，在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上
{
"presets": [
"es2015"
]
}
OK搞定！保存再回去看一下main-compiled.js 应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～
注意：想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持，需要在运行的时候加入一些tags（以开启Node.js的相关试验特性），具体可以参考Node.js官网对ES6的说明：ECMAScript 2015 (ES6)。
⑷ babel怎么编译箭头函数
gulp
脚本中能不能使用箭头函数取决于其运行环境，即
Node
的版本号。不过目前的版本应该都支持
ES6
语法。
gulp
本身不具备编译
JS
的能力，肯定是通过第三方插件来编译的，那么要看你用的什么插件以及什么配置来编译。
既然
webpack
直接可编译，那么使用
gulp
调用
webpack
来编译就不应该出问题的。光从你提供的信息来看，目前也就只能这么回答了。
⑸ 如何使用babel来进行语法的编译在这里可以看得到
编译器H Builder的语法应该是Visual Basic的基本语法。在Visual Basic中的基本语句包括：一、赋值语句。赋值语句的语法如下：变量名或对象.属性=表达式它的含义是把等号右边的值赋给等号左边的值。二、判定结构。一、If语句。用If...Then结构有条件地执行一个或多个语句。单行语法和多行块语法都可以使用： If condition Then statement If condition Then Statements End If Condition 通常是比较式，但它可以是任何计算数值的表达式。Visual Basic 将这个值解释为True或False：一个为零的数值为False，而任何非零数值都被看作True。若condition为True，则Visual Basic执行Then 关键字后面的所有statements。可以使用单行或多行语法有条件地执行一个语句。注意：If...Then的单行格式不用End If语句。如果condition为True时要执行多行代码，则必须使用多行块If...Then...End If语法。二、If...Then...Else语句。用If...Then...Else块定义几个语句块，执行其中一个语句： If condition1 Then [statementblock-1] [ElseIf condition2 Then [statementblock-2]] ... [Else [statementblock-n]] End If Visual Basic首先测试condition1。如果它为False，Visual Basic就测试 condition2，依次类推，直到找到一个为True的条件。当它找到一个为 True的条件时，Visual Basic就会执行相应的语句块，然后执行End If后面的代码。作为一个选择，可以包含Else语句块，如果条件都不是True，则Visual Basic执行Else语句块。 If...Then…ElseIf只是If...Then...Else的一个特例。注意，可以使用任意数量的 ElseIf子句，或者一个也不用。可以有一个Else子句，而不管有没有ElseIf 子句。二、循环语句。电脑最擅长的就是不厌其烦地重复做一项工作成千上万遍（即重复执行几行代码），这就是通过循环结构来完成的。VB支持的循环结构有：Do…Loop和For…Next。用Do循环重复执行一个语句块，且重复次数不定。Do…Loop是以计算数值为条件以决定是否继续执行。条件必须是一个数值或者值为True或False的表达式。在下面的Do…Loop循环中，只要条件为真就执行循环。 Do While 循环条件循环语句块 Loop 当Visual Basic执行到这个Do循环时首先测试条件，条件为假时，跳过所有语句。如果条件为真，Visual Basic就会执行语句，退回到Do While语句测试条件。只要条件为真，循环可以随意执行几次。如果条件一开始便为假，则不会执行语句。还有一种Do…Loop语句，是先执行语句，每次执行之后测试条件，循环中的语句至少执行一次。 Do 循环语句块 Loop While 循环条件在不知道循环要执行几次语句时，用Do循环，知道循环次数时，可以使用For…Next循环。For循环使用一个叫做计数器的变量，重复一次循环之后，计数器的值会增加或减少。 For 计数器=初值To终止值Step增量循环语句块 Next 计数器计数器、初值、终止值和增量为数值型。执行For循环时，设置计数器等于初值，测试计数器是否大于终止值，是则退出循环，执行循环语句，计数器增加增量后重复以上步骤。用Exit语句可以退出For循环、Do循环，它的语法是Exit Do和Exit For，在循环中出现的次数无限制。
⑹ babel怎么编译箭头函数
gulp 脚本中能不能使用箭头函数取决于其运行环境，即 Node 的版本号。不过目前的版本应该都支持 ES6 语法。
gulp 本身不具备编译 JS 的能力，肯定是通过第三方插件来编译的，那么要看你用的什么插件以及什么配置来编译。
既然 webpack 直接可编译，那么使用 gulp 调用 webpack 来编译就不应该出问题的。光从你提供的信息来看，目前也就只能这么回答了。
⑺ 怎么在webstorm上利用babel实现自动编译es6文件
现阶段，建议你直接考虑用gulp，利用gulp-babel转es6。 毕竟一个团队中不是每个人都是用的webstrom，还有毕竟后续es6不是你的唯一需求，比如你还需要webpack
现阶段版本中转es5后在IE8下还是有很多坑需要填，甚至有bug依然很难用常规手段解决，所以如果你们需要支持IE8不是很建议在实际项目中用babel。
⑻ Flask-Babel使用简易教程(一)
本文参考 https://translations.readthedocs.io/en/latest/flask-babel.html 做了修改，如有疑问请指正。
修改如下：
在终l端执行 pybabel --list-locales 命令，查看本机支持的语言，发现中文支持是zh_Hans_CN，而非zh_CN。所以在以下文章中，把zh_CN做下修改即可。修改的地方有两处，一处是命令，一处是文件。
Flask-Babel 是 Flask 的翻译扩展工具。安装命令如下：
pip install flask-babel
安装它的时候会顺便安装 Babel 、 pytz 、 speaklater 这三个包，其中 Babel 是 python 的一个国际化工具包。pytz 是处理时区的工具包，speaklater 相当于是 Babel 的一个辅助工具，我们这里集中在翻译流程上，这几个工具就供以后进一步了解吧。
接下来我们做一个简单的 Hello World 程序，新建一个叫 hello 的文件夹，在其中创建一个叫 hello.py 的文件，内容如下：
然后在 hello.py 的同一级目录下创建一个叫 templates 的文件夹，在其中写一个 index.html，内容如下：
很简单的 Hello World 程序，接下来我们要做的是让这个站变成中文站。
再接下来就是翻译了。翻译需要用到 flask-babel 这个 flask 扩展。首先我们将这个 app “国际化”，为模板和 .py 文件中的每一个字符串添加一个 gettext 函数，由于 gettext 函数被引用的次数太多了，为了方便手写，就将其 import 为 “_”：
然后修改模板：
你可以注意到我们对 app 的 locale 做了配置，然后用 babel 扩展将 app 再次初始化，并且将 .py 和 .html 中的字符串做了配置，让它们都使用gettext这个函数。其中值得注意的是gettext的格式化字符串的参数。如果直接用类似"It's %s today"% day是不行的。
这么一来，app 的语言其实是被写死成中文了。其实你可以在 flask 程序中让用户选择自己喜好的语言，或者依据浏览器设置用户优先显示的语言，详细做法可以参考官方文档中提到localeselector的部分。
接下来我们要做的是 babel 的配置。在 hello.py 的同级目录创建一个叫 babel.cfg 的文件，内容如下：
这样 babel 就知道要从哪些位置搜索要翻译的字符串了。然后我们用 pybabel 生成要翻译的 PO 模板文件，这个命令是 babel 这个工具包带来的，生成翻译模板命令如下：
$ pybabel extract -F babel.cfg -o messages.pot .
注意结尾的点“.”，这个点表示当前目录，目录是 pybabel 必须的参数，官方文档中缺少这个点，所以命令是无法执行成功的。messages.pot 就是我们生成的翻译模板文件，内容大致如下：
# Translations template for PROJECT.
# Copyright (C) 2017 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR , 2017.
#
#, fuzzy
msgid""
msgstr""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2017-03-22 13:46+0800\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME \n"
"Language-Team: LANGUAGE \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.3.4\n"
#: hello.py:10
msgid"Saturday"
msgstr""
#: templates/index.html:1
msgid"Flask International"
msgstr""
#: templates/index.html:2
msgid"Hello, World!"
msgstr""
#: templates/index.html:3
#, python-format
msgid"It's %(day)s today"
msgstr""
你可以修改里边头文件的信息，把个人和项目相关的资料加进去。
接下来我们创建中文翻译：
$ pybabel init -i messages.pot -d translations -l zh_Hans_CN
这句命令会在 hello 文件夹中生成一个 translations 文件夹，要确保 flask 能找到翻译内容，translations文件夹要和 templates 文件夹在同一个目录中。接下来我们就可以进行翻译了，修改translations/zh_Hans_CN/LC_MESSAGES/messages.po文件，将其中的内容翻译过来：
# Chinese (Simplified, China) translations for PROJECT.
# Copyright (C) 2017 ORGANIZATION
# This file is distributed under the same license as the PROJECT project.
# FIRST AUTHOR , 2017.
#
msgid""
msgstr""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2017-03-22 13:46+0800\n"
"PO-Revision-Date: 2017-03-22 13:42+0800\n"
"Last-Translator: \n"
"Language: zh_Hans_CN\n"
"Language-Team: zh_Hans_CN \n"
"Plural-Forms: nplurals=1; plural=0\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.3.4\n"
#: hello.py:10
msgid"Saturday"
msgstr"星期六"
#: templates/index.html:1
msgid"Flask International"
msgstr"Flask国际化"
#: templates/index.html:2
msgid"Hello, World!"
msgstr"哈喽，世界"
#: templates/index.html:3
#, python-format
msgid"It's %(day)s today"
msgstr"今天是%(day)s"
PO文件的翻译其实可以用专门的工具来编辑，比如 Poedit ，不过小文件直接手译就可以了。
编译翻译结果
翻译完后执行下面的命令，为其编译出 message.mo 文件：
$ pybabel compile -d translations
如果上述命令无法生成 messages.mo 文件，那你需要将 message.po 中的#,fuzzy删除。
然后就算基本完成了。这时执行 python hello.py 就会看到翻译的中文页面了。
有时我们需要对程序和模板做修改，翻译也要随之更新。更新后需要用前面的命令重新生成 messages.pot 文件，然后使用下面的命令将更新的内容 merge 到原来的翻译中：
$ pybabel update -i messages.pot -d translations
最后再到对应 locale 的文件夹下更新翻译并 compile 即可。
项目结构：
⑼ 详解如何使用babel进行es6文件的编译
我使用的是webpack + babel-loader来编译它的，也许是webpack或者是babel的某个设定而不是ES6 import本身的，总之这样是可以用的！
⑽ 怎么在webstorm上利用babel实现自动编译es6文件
eisneim，不爱健身的设计师不是好的程序员…我最近用的就是是IOjs+koa+babel来开发项目的，我就用了babel来支持arrowfunction=>以及其他的ES6特性，Promise，generator这些iojs都支持的很好的。在用babel的时候不管是使用hook，还是生成compile文件或者是结合到mocha,gulp中去的时候都可以设置blacklist，就是不用的那些transformer，文档自己看；