如果不了解 npm 和 ES6 模块，那就看过来 - WEB前端 - 伯乐在线
& 如果不了解 npm 和 ES6 模块，那就看过来
JavaScript 的格局日新月异，网站和应用的依赖关系也随之而变。
这篇文章适合那些大量使用 script 标签来加载 JS 的程序员，随着网页数目增多和项目规模的扩大，他们感觉到依赖管理变得越来越笨重。
如果想要深入了解每一个细节，同时想对 CommonJS 和 AMD 规范做比较的话，请参考 Axel Rauschmayer 的
, 尤其是第 17 章。
什么是 JavaScript 模块？
JavaScript 模块允许我们把项目中的代码分散成一个个单独的文件，或者使用通过
安装的开源模块。用模块化的方式写代码有助于（项目的）组织、维护、测试，以及最重要的依赖管理。
当我们编写 JavaScript 时，理想情况是保障每个模块都专注一件事并把这件事做好。这种分工可以让我们在需要某个模块时再去做相应的加载。模块化是是 npm 背后的核心原则。当需要某个特定的功能时，我们能安装相应的模块并加载到应用当中。
随着时间推移，我们发现那种大而全的框架变少了，看到更多的是 专注一件事并把这件事做好 的小型模块。
举个例子，大部分人都用过 jQuery。这个库包含了从 CSS 操作到 ajax 调用几乎全部的方法。现如今，很多人开始迁移到 React 这类库上，我们常常需要加载额外的模块来完成一些任务如 ajax 或路由。
这篇文章将会带你大致了解 npm 和 ES6 模块的使用。对于其它一些的包管理（如 ） 和模块加载工具（如
和 ），已经有大量的文章和话题在讨论了。
不管你是做 Node 开发还是前端开发，我相信 ES6 模块和 npm 是未来的方向。如果你去看当下流行的开源项目，像
或 ，你会发现他们都采用了 ES6 模块 ＋ npm。
当前的开发流程
很多 JavaScript 的开发流程是这样的：
找一个符合要求的插件或库然后从 GitHub 上下载。
通过 script 标签加载到网站。
用全局变量调用或以 jQuery 插件的方式调用。
这类开发流程这么多年来表现一直不错，除了这几个问题：
插件必须手动升级 － 很难及时得知（该插件）何时修复了严重的bug或是有哪些新功能可用。
混乱的源代码版本控制 － 所有依赖都要加入源代码，当库更新时会导致非常不愉快的结果（版本问题）。
基本没有依赖管理 － 很多脚本的功能是重复的，如果分成小模块则可以很轻松的实现共享。
代码污染和潜在的全局命名空间冲突。
编写模块化的 JavaScript 这种理念并不新鲜，不过随着 ES6 的到来和业界将 npm 作为 JavaScript 的首选包管理工具，我们看到大量的开发摒弃了从前的工作流程，迁移到使用 ES6 和 npm 的标准化流程上来。
等等，npm？那不是 Node 专用的吗？
很久以前，npm 是作为 Node.js 的包管理工具起步的，如今它已经进化为JavaScript和前端开发的包管理工具。现在，我们可以把库的安装过程简化为 2 个步骤：
从 npm 安装依赖，例如：
JavaScript
npm install lodash --save
npm install lodash --save
在当前文件中导入刚才的依赖，例如：
JavaScript
import _ from 'lodash';
import _ from 'lodash';
这套开发流程还需要很多的工作要做，同时关于模块的导入导出也有很多需要学习，现在让我们来深入了解一下吧。
模块背后的理念
我们使用导入和导出语句来在文件之间共享代码（变量、函数、数据、任何代码），而不是把所有代码加载到全局命名空间下。每一个模块导入需要的依赖，也可以为其它文件导出需要的代码。
让代码在浏览器运行还需要一个打包的步骤，我们会在文章的后面加以讨论，现在，让我们专注于 JavaScript 模块背后的核心理念。
创建自己的模块
假设我们正在构建一个在线购物的应用，需要一个文件存放所有的辅助函数。我们可以创建一个模块命名为 helpers.js ，文件包含一些辅助函数 － formatPrice(price)、 addTax(price) 和 discountPrice(price, percentage)，还有一些关于该在线商城的变量。
我们的 helpers.js 文件看起来如下：
JavaScript
const taxRate = 0.13;
const couponCodes = ['BLACKFRIDAY', 'FREESHIP', 'HOHOHO'];
function formatPrice(price) {
// .. 做一些格式化
return formattedP
function addTax(price) {
return price * (1 + taxRate);
function discountPrice(price, percentage) {
return price * (1 - percentage);
12345678910111213141516
const taxRate = 0.13;&const couponCodes = ['BLACKFRIDAY', 'FREESHIP', 'HOHOHO'];&function formatPrice(price) {&&&&// .. 做一些格式化&&&&return formattedPrice;}&function addTax(price) {&&&&&&return price * (1 + taxRate);}&function discountPrice(price, percentage) {&&&&return price * (1 - percentage);}
现在，每个文件都持有自己的本地函数和变量，只要没有明确地导出，它们绝不会渗透到其它文件的作用域中。在上面的例子里，我们可能不想让其它模块访问 taxRate 变量，但在模块内部确实需要这个变量。
我们怎么让其它模块访问到这些函数和变量呢？答案是导出它们。在 ES6 中有两种导出方式，命名导出和默认导出。由于需要让多个函数和 couponCodes 变量被访问到，我们使用命名导出。稍后我们会加以详述。
从模块导出代码，最简单直白的方式就是在行首加上 export 关键字，像这样：
JavaScript
const taxRate = 0.13;
export const couponCodes = ['BLACKFRIDAY', 'FREESHIP', 'HOHOHO'];
export function formatPrice(price) {
// .. 做一些格式化
return formattedP
12345678910
const taxRate = 0.13;&export const couponCodes = ['BLACKFRIDAY', 'FREESHIP', 'HOHOHO'];&export function formatPrice(price) {&&&&// .. 做一些格式化&&&&return formattedPrice;}&//&&...
我们也可以在最后再导出：
JavaScript
export couponC
export formatP
export addT
export discountP
export couponCodes;export formatPrice;export addTax;export discountPrice;
或者里一次性导出：
JavaScript
export { couponCodes, formatPrice, addTax, discountPrice };
export { couponCodes, formatPrice, addTax, discountPrice };
还有很多其它很便捷的导出方式，如果碰到有些情形无法满足你的工作需求，请查看 MDN 的文档。
前面提到，从模块中有两种导出方式 － 命名或默认。上面的例子用了命名导出。如果要让其它模块导入这些出口，我们必须要知道我们希望导入的变量/函数的名称 － 接下来会有一个例子说明。使用命名导出的好处是你可以从一个模块中导出多项内容。
另一种导出方式是默认导出。当需要导出多个变量／函数时，可以用命名导出，当你的模块只需要导出一个变量/函数的时候，使用默认导出就行了。尽管你可以在一个模块中同时使用默认导出和命名导出，我还是建议你每个模块只采用一种方式。
默认导出的例子是一个单独的 StorePicker React 组件，或者是某个数组。例如，下面这个数组需要让其它组件访问到，我们可以用默认导出。
JavaScript
// people.js
const fullNames = ['Drew Minns', 'Heather Payne', 'Kristen Spencer', 'Wes Bos', 'Ryan Christiani'];
const firstNames = fullNames.map(name =& name.split(' ').shift());
export default firstN // ["Drew", "Heather", "Kristen", "Wes", "Ryan"]
// people.jsconst fullNames = ['Drew Minns', 'Heather Payne', 'Kristen Spencer', 'Wes Bos', 'Ryan Christiani'];&const firstNames = fullNames.map(name =& name.split(' ').shift());&export default firstNames; // ["Drew", "Heather", "Kristen", "Wes", "Ryan"]
和上面一样，你可以在想要导出的函数到前面加上 export default 关键字。
JavaScript
export default function yell(name) { return `HEY ${name.toUpperCase()}!!` }
export default function yell(name) { return `HEY ${name.toUpperCase()}!!` }
导入自己创建的模块
既然我们已经把代码分成了小模块并且按需求导出了，现在可以向前一步，把这些模块导入到应用的其它部分了。
如果要导入的模块是代码库的一部分，我们使用 import 语句，然后指定文件相对于当前模块的路径 － 跟你平时在 HTML 中导入资源路径或 CSS 背景图是一样的。你会发现我们去掉了 .js 后缀，因为后缀不是必需的。
需要注意并不是导入一次模块，整个应用就能像全局变量一样去访问了。每当模块依赖其它模块时 － 比如我们上面的代码需要一个 lodash 方法 － 我们必须将它导入进来。如果我们有5个模块都需要同样的 lodash 函数，我们需要导入 5 次。这有助于保持作用域清晰，同时让模块更加轻便且可重复使用。
导入命名导出
我们最先导出的时我们的辅助模块。这里使用的是 命名导出，现在，有很多种方式将它们导入：
JavaScript
把所有内容作为一个对象的属性或方法导入
import * as h from './helpers';
// 然后使用
const displayTotal = h.formatPrice(5000);
// 或者直接把所有内容导入到当前模块的作用域
import * from './helpers';
const displayTotal = addTax(1000);
//我不推荐这种风格，因为不够明确，可能会导致代码难以维护
// 或者分组挑选需要的导入
import { couponCodes, discountPrice } from './helpers';
const discount = discountPrice(500, 0.33);
12345678910111213
//&&把所有内容作为一个对象的属性或方法导入import * as h from './helpers';// 然后使用const displayTotal = h.formatPrice(5000);&// 或者直接把所有内容导入到当前模块的作用域import * from './helpers';const displayTotal = addTax(1000);//我不推荐这种风格，因为不够明确，可能会导致代码难以维护&// 或者分组挑选需要的导入import { couponCodes, discountPrice } from './helpers';const discount = discountPrice(500, 0.33);
导入默认导出
如果你回想一下，我们还从 people.js 中导出了一个 first names 的数组，这是那个模块唯一需要导出的部分。
默认导出可以用任何名称导入 － 不需要知道导出的变量、函数、或类的名称。
JavaScript
import firstNames from './people';
import names from './people';
import elephants from './people';
// 这些都可以导入 first names 数组
// 你还可以这样导入 默认导出
import * as stuff from './people'
const theNames = stuff.default
12345678910
import firstNames from './people';// 或import names from './people';// 或import elephants from './people';// 这些都可以导入 first names 数组&// 你还可以这样导入 默认导出import * as stuff from './people'const theNames = stuff.default
从 npm 导入模块
我们使用的大量模块来自于 npm。不管你需要一个像 jQuery 这种完整库，还是 lodash 这种只有工具函数的库，又或是 superagent 这种提供 Ajax 请求的库，我们都可以用 npm 来安装。
JavaScript
npm install jquery --save
npm install lodash --save
npm install superagent --save
// or all in one go:
npm i jquery lodash superagent -S
npm install jquery --savenpm install lodash --savenpm install superagent --save// or all in one go:npm i jquery lodash superagent -S
一旦这些包存在在 node_modules/ 目录下了，就可把它们导入到我们的代码。默认情况下，Babel 会把 ES6 的导入语句编译成 CommonJS。所以，只要使用一个可以解析模块语法的打包工具（webpack 或者 browserify），你就可以玩转 node_modules/ 目录了。我们打导入语句只需要包含模块的名称就可以了。其它打包工具可能需要插件或配置才能从 node_modules/ 目录导入。
JavaScript
// 导入整个库或插件
import $ from 'jquery';
// 然后正常使用就可以了
$('.cta').on('click',function() {
alert('Ya clicked it!');
// 导入整个库或插件import $ from 'jquery'; // 然后正常使用就可以了$('.cta').on('click',function() {&&&&alert('Ya clicked it!');});
上面的代码能正常工作是因为 jQuery 是按 CommonJS 模式导出的， Babel 将 ES6 的 import 语句转译使其适配 jQuery 的 CommonJS 导出（语句）。
我们再试试 superagent。和 jQuery 一样，superagent 对整个库使用了CommonJS规范的默认导出，所以我们可以任意命名 － 一般命名成 request。
JavaScript
// 将模块导入
import request from 'superagent';
// 然后使用！
.get('/users/wesbos')
.end(function(err, res){
console.log(res.body);
// 将模块导入import request from 'superagent';// 然后使用！request&&&&.get('/users/wesbos')&&&&.end(function(err, res){&&&&&&&&console.log(res.body);&&&&});
“精挑细选”——部分导入
我最喜欢 ES6 模块的一个特性就是，有大量的库允许你只选择你需要的代码。lodash 是个非常棒的工具库，里面有很多有用的 JavaScript 方法。
我们可以将整个库用 _（下划线） 变量导入，这是因为 lodash 将整个库作为一个主模块来导出（同样Babel 会将我们的 import 进行转译，效果等同于 lodash 使用了默认导出）
JavaScript
// 将整个库导入成一个 _ 变量
import _ from 'lodash';
const dogs = [
{ 'name': 'snickers', 'age': 2, breed : 'King Charles'},
{ 'name': 'prudence', 'age': 5, breed : 'Poodle'}
_.findWhere(dogs, { 'breed': 'King Charles' });
// 将整个库导入成一个 _ 变量import _ from 'lodash';const dogs = [&&{ 'name': 'snickers', 'age': 2, breed : 'King Charles'},&&{ 'name': 'prudence', 'age': 5, breed : 'Poodle'}];&_.findWhere(dogs, { 'breed': 'King Charles' });
不过，更常见的是你只想导入一两个方法，而不是整个库。因为 lodash 已经将每个方法都作为一个模块导出了，所以我们可以选择只导入我们想要的部分！ 同样Babel 的转译保证了这种做法的可行性。
JavaScript
import { throttle } from 'lodash';
$('.click-me').on('click', throttle(function() {
console.count('ouch!');
}, 1000));
import { throttle } from 'lodash';$('.click-me').on('click', throttle(function() {&&console.count('ouch!');}, 1000));
确保模块是最新的
一些反对“微模块”编码的人们认为，这么做会导致 npm 中的库存在大量的相互依赖。
JavaScript 生态发展非常迅速，要让你的依赖维持最新状态非常困难。我们都知道不管是代码还是依赖都存在 bug、安全漏洞或者某些代码不再易用。 我们需要清楚的了解项目的各种不安全、被弃用的、过时的或无用的代码。
要解决这个问题，bitHound 公司提供了一项很棒的服务，这项服务能够持续监控你的代码，当你的依赖出现了任何错误都会及时向你报告，同时还会提供一个项目的综合统计评分。通过这项服务可以看出你的项目到底有多健壮，它对所有开源项目都是免费的。
bitHound 集成了 GitHub 和 BitBucket 并且推出了自动提交分析功能，这样当你的代码库发生变更时会通知 bitHound。一旦依赖库过期，你的 Slack 或 HipChat 就会收到通知，或收到一份包含详细信息的邮件。
bitHound 还包含了 Pull Requests 的分支状态 － 设置 通过/失败 标准，之后 bitHound 会将这些状态信息提交到 GitHub 或者 Bitbucket。
有个叫 npm-check-updates 的工具可以非常好地搭配 bitHound 工作。使用 npm install npm-check-updates -g 在你开发机器上全局安装，然后运行 ncu 命令，可以快速检查你的代码包是否需要升级。如果需要，你可以运行 ncu –upgradeAll 命令自动升级 package.json 里面的所有包。之后一定要运行 npm install 命令来从 NPM 上获取最新代码。
因为浏览器现在还不支持 ES6 模块，我们需要一些工具让它们能正常工作。 JavaScript 打包工具可以把这些模块转译成一个单独的 JavaScript 文件，或者把应用程序的各个部分打包成多个文件。
最终我们不再需要打包工具，HTTP/2 加载时会自动请求所有的 import 语句。
这有一些流行的打包工具，大部分都使用 Babel 将 ES6 模块转译成 CommonJS。
最初用来在浏览器中使用 nodejs 风格的代码。同样支持 ES6 模块
在 React 社区非常流行。不仅支持 ES6 ，还支持很多其它格式的模块代码。
为 ES6 而生，但是source maps（一个记录代码转换前和转换后的位置信息文件）似乎有些问题 － 我会在一两个月后再看看。
基于 npm .
为Ember用户提供的与 webpack 类似的简单命令行工具。使用了 Broccoli 引擎。
该怎么选呢？选最适合你的。我是 Browserify 和 webpack 的忠实粉丝，因为前者上手简单，后者容易与 React 集成。编写 ES6 模块的迷人之处在于你写的不是 Browserify 或 webpack 模块 － 你可以随时切换打包工具。有很多选用哪个工具的观点，快速搜索一下你会发现每个工具都有大量的论述。
如果你已经在执行任务时，使用了gulp， grunt， 或npm对现有的JavaScript和CSS文件进行操作，那么将模块引入工作流程非常简单。
实现打包非常简单 － 你可以将它作为一个 gulp 的子任务来运行，或者通过 webpack 配置、npm 脚本 或是直接使用命令行。
我创建了一个代码库，你可以通过几个简单模块的代码详细了解如何使用 webpack 和 Browserify。
导入非模块代码
如果你正在致力于将代码库模块化，但又很难一步做到，你可以简单的通过导入“文件名”来加载并执行文件中的代码。这不算 ES6，但它是打包工具的一个功能。
这个概念与连续执行多个 js 文件并无不同，除非你导入的代码作用域限制在导入的模块中。
需要全局变量的代码
有些库，比如说 jQuery 插件，不太适合 JavaScript 的模块化系统。整个 jQuery 插件系统都假设有一个叫window.jQuery的全局变量 ，每个插件可以附加在该变量之上。但是我们刚刚学过 ES6 模块没有全局变量。所有代码的作用域都局限于当前模块，除非你把一些代码明确地设置在window对象上。
要想解决这个问题，首先要问问自己是否真得需要这个插件，还是可以自己写一个。很多 JavaScript 插件系统已经重写并移除 jQuery 依赖，成为独立的 JavaScript 模块。
如果不是，你需要检查你的构建流程，看看能不能帮助解决问题。Browserify 有 Browserify Shim（用于解决不兼容Browserify或不兼容CommonJS的问题），webpack 也有相关文档。
当导出一个函数时，不要在最后包含分号。很多打包工具仍然允许使用额外的分号，但是在函数声明后面去掉分号是最佳实践，这样当你切换其它打包工具时可以避免碰到一些奇葩的问题。
JavaScript
export function yell(name) { return `HEY ${name}`; };
export function yell(name) { return `HEY ${name}`; }
// 错误：export function yell(name) { return `HEY ${name}`; };// 正确：export function yell(name) { return `HEY ${name}`; }
希望这是一篇关于使用 npm 和 ES6 模块化不错的介绍。还有更多需要学习的内容，我认为，最好的学习方式就是在你的下一个项目中使用它。下面有一些些非常棒的学习资源，可以在你的前进道路上提供帮助。
(complete with
and video recordings: )
Thanks + Updates
非常感谢 、 、、
帮助校对并且提供了高质量的反馈意见。
如果你有任何意见、代码示例、技术升级或者说明，想加进来，请提交 。
关于作者：
可能感兴趣的话题
这个name.split(‘ ‘).shift() 错了 shift 是删除第一个，而文章中的是去掉last name 应该是用pop()
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线▲背景：如上图：我在用 es6 + react 写一个项目。▼问题：如下文：我用 es6 的 export 导出一个类（就是react的一个组件）。如图中其它几种导出都成功，只有
1export {HeaderTop}
?这样不可以导出那么，如果我这个文件有多个类（就是多个组件），要导出，如何导出？谢谢老司机。
愿老司机一生幸福，谢谢您的指点。
––
语句要有一个名字，而
1export {HeaderTop}
1{HeaderTop}
却是创建了一个匿名的对象，没有指定名字。
你可以修改为
1export HeaderTop
1export default HeaderTop
. 而对应导入的地方分别就是
1import {HeaderTop} from 'xxx'
1import HeaderTop from 'xxx'
如果有多个要导出的对象，建议这样写：
12export class A {...}
export class B {...}
导入的地方就可以这样用：
1234import {A, B} from 'xxx'
import * from 'xxx'
webpack2会对这种情况做优化，比
1export default {A, B}
要简短高效一些
详细的export和import语法请直接参考 export 语句 – MDN
有两种情况，一种是普通的
1export default
1export default
的时候，你可以用
，注意这里不加
1export default
的时候，就可以用
1import { bb, cc }
，注意这里有
说的不清楚，写代码好了
1234// path.js
export default { a:1 };
export let b = 2;
export let c =3;
123456// app.js
import somethingdefault from './path'; // somethingdefault就是{a:1}
import { b, c } from './path'; // b就是2, c就是3
//也可以合并这么写
import something, { b, c } from './path';
本文出自操他妈，转载时请注明出处及相应链接。
本文永久链接: /95095.html
0 , , ,
Ɣ回顶部本文讲的是Es6 写的文件import 起来解决方案详解_基础知识，
这段时间，学习了一点关于es6新规范的知识，然后心血来潮，想尝试一下用ES6编写的代码在浏览器中跑起来。
说干就干，先说下我的实现步骤（没想到有坑！）
把ES6代码转译成ES5;
html文件引入转译后的ES5;
然后在浏览器环
这段时间，学习了一点关于es6新规范的知识，然后心血来潮，想尝试一下用ES6编写的代码在浏览器中跑起来。
说干就干，先说下我的实现步骤（没想到有坑！）
把ES6代码转译成ES5;
html文件引入转译后的ES5;
然后在浏览器环境中运行;
在node环境中运行;
然后下面是我的一些目录结构，大致预览一下。
src，es6开发目录
dist，es5生产目录
test，一个测试目录
然后，看一下我的ES6开发的一些js是什么样子。
然后我们在html中引入dist中的经过转译的文件
在浏览器中测试，test中因为没引入模块，所以正常执行，app中因为引入了模块，而且是CommonJS规范，但是浏览器不支持这种规范，因此报错
假如，我们为了测验，就给html加上requireJS文件，浏览器支持AMD/CMD规范。异步加载定义。
但是，我们发现，还是会报错，说明语法不支持，或者两者冲突了，因为一种是AMD，一种是CommonJS。
由于我们通过node来编译ES6成ES5，node模块就是参照CommonJS规范来的，所以ES5的语法，也属于CommonJS规范，而且现在的浏览器和node都不支持ES6的规范或大部分不支持。
经过查阅资料，发现可以通过webpack打包工具来将依赖合并成一个文件，然后引入html中。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索es6
es6 import from 详解、es6 import、es6 import as、es6 import css、es6 import export，以便于您获取更多的相关知识。
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
的信息，还有es6 import from 详解、es6 import、es6 import as、es6 import css、es6 import export等
，所有相关内容均不代表云栖社区的意见！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文件