创宇盾星图 前端架构: reactjs 创建组件 reflux webpack打包 echarts grunt配置轻量任务 less语法糖 ES6 + babel解析器 getting start 本地开发 npm install grunt serve grunt serve会启动本地开发 webpack-dev-server webpack-dev-server方便使用热替换,一修改,界面马上改变 所以本地开发路径为:http://:8000/webpack-dev-server/ 不要奇怪 grunt test跑测试 线上模式 npm install grunt test grunt build 在dist 目录生产静态的文件,挂载到nignix 就行了 参考资料 reactjs reactjs是以组件为基础,基于虚拟DOM和单向数据流的前端script库 reactjs 中文网 flux结构 flux是一种前端架构,区别于传统前端MVC reflux是flux结构的一种具体实现 webpack webpack是模块加载器,其允许把npm包,和css整体打包到前端 百度echarts echarts 是百度开发的基于zRender库的开源图表库 主页：http://www./lib/view/home/8使用 Webpack 和 ES6 进行 React 开发
工欲善其事必先利其器，在进行 React 的开发时，通常会结合 Webpack 和 ES6 一起进行。本文讲的正是如何使用 React + Webpack + ES6 进行组合开发。关于 React 的入门，后面另开一文。
本文最终的输出是一个 Hello World 。
本文所涉及的代码在&&，可以直接作为一个种子项目使用：
git clone /huangtengfei/react-webpack-es6.git
cd react-webpack-es6
npm install
npm run dev
如果你使用 sublime 开发，可以安装&&插件。
安装依赖项
在项目目录下 ，初始化一个&package.json&文件，执行：
安装&react&和&react-dom&依赖：
npm install react react-dom
安装&webpack&和&webpack-dev-server&依赖：
npm install webpack webpack-dev-server
安装&babel&依赖：
npm install babel-loader babel-core babel-preset-react babel-preset-es2015
本文示例最终的目录结构是这样的：
--your project
|--components（组件目录）
|--Hello（组件1）
|--index.jsx
|--index.less
|--World（组件2）
|--index.jsx
|--index.less
|--index.js（入口文件）
|--build（输出目录）
|--index.html
|--bundle.js（输出文件，由 webpack 打包后生成的）
|--package.json
|--webpack.config.js
创建 React 组件
按照前面的目录结构，新建一个 components 文件夹，存放所有组件。
在 components 下建一个 Hello 文件夹，用来存放 Hello 组件的逻辑和样式。
Hello/index.js&的代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return &h1&Hello&/h1&
ReactDOM.render(&Hello /&, document.getElementById('hello'));
World 组件的开发同上，略去。
在 build 目录下创建一个 HTML 页面，来使用前面创建的两个组件。
index.html&的代码如下：
&!DOCTYPE html&
Hello World
使用 Webpack 打包
Webpack 是一个前端模块加载兼打包工具，可以对 JS、CSS 和 图片 等都作为模块来使用和处理。对不同类型的需要编译的文件，需要使用相应的加载器（比如用 babel 转译 ES6）。
另外，由于 Webpack 需要一个入口文件来进行分析和处理，需要先将 React 组件引入到一个主文件。
从前文的目录结构可以看出，&components/index.js&就是这个主文件，它的代码如下：
import Hello from './Hello/index.jsx';
import World from './World/index.jsx';
下面就是 Webpack 配置文件&webpack.config.js&的编写，代码如下：
var path = require('path');
var webpack = require('webpack');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(__dirname, './components/index.js');
var BUILD_PATH = path.resolve(__dirname, './build');
module.exports = {
entry: APP_PATH,
path: BUILD_PATH,
filename: 'bundle.js'
loaders: [{
test: /\.jsx?$/,
loaders: ['babel-loader?presets[]=es2015,presets[]=react']
最后，需要将编译打包后的文件&bundle.js&引入到&index.html&中：
构建和启动
前面的开发完成后，需要执行&webpack.config.js&中的构建任务，生成&bundle.js&，这个操作可以在&package.json&中配置：
&scripts&: {
&build&: &webpack&
执行&npm run build&完成构建，此时打开&index.html&，即可看到效果。
启动服务器
但这种方式显得略 low，一是它是双击以文件的形式打开 HTML 页面，二是每次有更改都要手动执行&npm run build&重新打包。
一种更好的方式是启动一个静态资源服务器，监听文件内容修改并自动打包。在这里用的是前面安装好的&webpack-dev-server&，在&package.json&中配置：
&scripts&: {
&dev&: &webpack-dev-server --devtool eval --progress --colors --hot --content-base build&
简单解释一下 dev 中各个参数的含义：&webpack-dev-server&在&localhost:8080&建立一个
Web 服务器；&--devtool eval&映射编译好的源码，用于调试；&--progress&显示代码打包进度；&--colors&表示在命令行中显示颜色；&--content-base&来指定
server 启动后的内容目录。
执行&npm run dev&启动 server，此时打开&http://localhost:8080&，即可看到效果。修改一下
Hello 或者 World 组件中的内容，刷新页面，你会发现浏览器中内容也相应改变了。
前面实现了对文件修改的监听和自动打包，但浏览器还需要手动刷新。其实可以在 Webpack 的配置文件中增加一个入口点，实现自动刷新。
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
这样，应用在修改后，浏览器就会自动刷新了。
更完整的种子
其实讲到这里本文已经可以结束了，不过为了让种子更完整，并体现 Webpack 的强大，再加上点样式和图片吧。
不管什么类型的资源，Webpack 都需要相应的 loader 来处理。对于普通的 css，需要&css-loader&和&style-loader&两种
loader，前者会遍历所有 css 并对&url()&处理，后者将样式插入到页面的 style 标签中。对于预编译 css 语言，还需要额外的 loader，比如&less-loader&或&sass-loader&，这里用&&举例。
首先，安装 loader ：
npm install less-loader css-loader style-loader
然后，在&webpack.config.js&中配置 loader，注意 loader 的处理顺序是从右到左的：
test: /\.less$/,
loader: 'style!css!less'
配置完之后要重新运行一下&npm run dev
接着，在 Hello 和 World 组件中各添加一个样式文件，这里用&Hello/index.less&举例：
@lightgrey: #ccc;
background: @lightgrey;
最后，在&components/index.js&中引入 less 文件：
import './Hello/index.less';
import './World/index.less';
切换到浏览器，看一下是不是有变化了呢~
为了减轻网络请求的压力，有时候会有将小图片转成 BASE64 字符串的需求，这个可以通过&url-loader&来实现。
同处理样式中的操作，首先安装&url-loader&：
npm install url-loader
然后配置&webpack.config.js&：
test: /\.(png|jpg)$/,
loader: 'url?limit=50000'
重新重新运行一下&npm run dev
接着，在 Hello 组件下建一个&imgs&文件夹，并放入一张小于 50K 的&bg.png&做背景图片，然后修改&Hello/index.less&文件：
background: url('./img/bg.png');
切换到浏览器，审查元素，看一下图片是不是转成 BASE64 字符串了呢~
到此为止，这已经是一个较为完整的种子了。想对 React 、Webpack 和 ES6 各自做深入了解的，请自行查阅资料~
loader 的写法
在使用 Webpack 打包小节&webpack.config.js&的编写中，&babel-loader&最初我是这样写的：
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
presets: ['es2015', 'react']
后来为了使用热加载，引入了&react-hot&，loader 要改为 loaders，即：
: ['babel-loader', 'babel-loader'],
presets: ['es2015', 'react']
这时在执行构建的时候，会报错&&，于是改成这种写法。不过后来直接用 webpack-dev-server 的&--hot&选项，也没引入&react-hot&了，但此处写法仍保留，便于后面扩展
安装 less-loader 报错
如果在安装样式的几个 loader 的时候，报以下错误：
不妨试试用 cnpm 单独安装 less ：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1912次
排名：千里之外
原创：11篇
(2)(6)(5)(1)React +ES6 +Webpack入门-android100学习网
React +ES6 +Webpack入门
eact已成为前端当下最热门的前端框架之一 ， 其虚拟DOM和组件化开发让前端开发更富灵活性，而Webpack凭借它异步加载和可分离打包等优秀的特性，更为React的开发提供了便利...
eact已成为前端当下最热门的前端框架之一 ， 其虚拟DOM和组件化开发让前端开发更富灵活性，而Webpack凭借它异步加载和可分离打包等优秀的特性，更为React的开发提供了便利。其优秀的特性不再赘述。本文将详细的记录react babel webpack的环境搭建，以及搭建的过程中遇到的一些坑。
一、新建React项目
1、如图为新建react项目结构，其中 entry.js放置react入口代码，index.js放置react组件代码，assets文件是webpack打包之后生成文件的存放地址。
由于react代码需要jsx来写，所以我们修改编辑器里的配置。我使用的是mac版的webstorm，在如下图地方修改jsx提示配置
首先你得安装npm 同时命令行输入
npm install
新建node_modules
2、输入如下命令安装react模块
npm i --save react
由于react升级后把reactDOM独立出来 ，所以我们还需要安装react-dom
npm install react-dom --save-dev
具体react代码在安装完webpack后介绍
二、安装webpack
1、什么是Webpack？
事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包
2、安装webpack
sudo npm install -g webpack
本项目安装
npm install webpack --save-dev
3、webpack配置
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
在根目录新建js文件 webpack.config.js
文件内容大概如下
* Created by mac on 16/7/14.
var webpack = require('webpack');
var path = require('path');
module.exports = {
//页面入口文件配置
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/only-dev-server',
'./js/entry.js'
//入口文件输出配置
path: __dirname + '/assets/',
filename: 'bundle.js'
//加载器配置
loaders: [
test: /\.css$/,
loader: 'style-loader!css-loader'
test: /\.js$/,
loader: 'jsx-loader?harmony'
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
test: /\.js|jsx$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0'],
include: path.join(__dirname, 'js')
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.scss']
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
这里对Webpack的打包行为做了配置，主要分为几个部分：
entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是 .js 结尾的文件都是用 babel-loader 做处理，而 .jsx 结尾的文件会先经过 jsx-loader 处理，然后经过 babel-loader 处理。当然这些loader也需要通过 npm install 安装
plugins: 这里定义了需要使用的插件，这里使用了react-hot会在之后介绍
安装loader示例
npm install jsx-loader --save-dev
在我的webpack.config文件中，文件入口为 js/entry.js，entry中的index数组为之后使用的react-hot配置，若不使用插件则为
index: './js/entry.js'
打包后的出口为assets/bundle.js
三、安装babel
1、为什么babel
能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。
2、安装babel
npm install -g babel
完成后可用命令sudo babel --help查看是否安装成功
Babel提供babel-cli工具，用于命令行转码。
npm install babel-cli --save-dev
如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。
npm install babel-core --save-dev
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 首先新建.babelrc文件
文件默认如下
"presets": [],
"plugins": []
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
之后在.babelrc文件中加入配置
"presets": [
"plugins": []
这时在webpack.config文件中loader中加入配置,让打包时加载babel
test: /\.js|jsx$/, loaders: ['babel?presets[]=es2015,presets[]=react,presets[]=stage-0']
同时安装babel-loader
npm install babel-loader --save-dev
注意！这里presets的顺序要和.babelrc的顺序一致基于 Webpack 和 ES6 打造 JavaScript 类库 - WEB前端 - 伯乐在线
& 基于 Webpack 和 ES6 打造 JavaScript 类库
两个月前，我曾发布了一篇基于
的 React 起步教程。你眼前的这篇文章跟那一篇差不多，只不过不包含 React 那一块。这篇教程稍微简单一些，但仍然会有一些棘手的部分。因此，我特意建了一个全新的代码仓库 ，把创建一个 JavaScript 类库所需的所有素材都放了进去。
首先，我们说的 “类库” 是指什么
在 JavaScript 语境中，我对类库的定义是 “提供了特定功能的一段代段”。一个类库只做一件事，并且把这件事做好。在理想情况下，它不依赖其它类库或框架。jQuery 就是一个很好的例子。 或者
也可以认为是一个类库。
一个类库应该：
可以在浏览器环境下使用。也就是说，可以通过 &script& 标签来引入这个类库。
兼容 ES6(ES2015) 的模块系统、 和
模块规范。
用什么来开发这个类库并不重要，重要的是我们最终产出的文件。它只要满足上述要求就行。尽管如此，我还是比较喜欢用原生 JavaScript 写成的类库，因为这样更方便其它人贡献代码。
我一般选择如下的目录结构：
+-- library.js
+-- library.min.js
+-- index.js
+-- lib|&& +-- library.js|&& +-- library.min.js+-- src|&& +-- index.js+-- test
其中 src 目录用于存放源码文件，而 lib 目录用于存放最终编译的结果。这意味着类库的入口文件应该放在 lib 目录下，而不是 src 目录下。
我确实很喜欢最新的 ES6 规范。但坏消息是它身上绑了一堆的附加工序。也许将来某一天我们可以摆脱转译过程，所写即所得；但现在还不行。通常我们需要用到
来完成转译这件事。Babel 可以把我们的 ES6 文件转换为 ES5 格式，但它并不打算处理打包事宜。或者换句话说，如果我们有以下文件：
+-- index.js (es6)
+-- helpers.js (es6)
+-- lib+-- src&&&&+-- index.js (es6)&&&&+-- helpers.js (es6)
然后我们用上 Babel，那我们将会得到：
+-- index.js (es5)
+-- helpers.js (es5)
+-- index.js (es6)
+-- helpers.js (es6)
+-- lib|&& +-- index.js (es5)|&& +-- helpers.js (es5)+-- src&&&&+-- index.js (es6)&&&&+-- helpers.js (es6)
或者再换句话说，Babel 并不解析代码中的 import 或 require 指令。因此，我们需要一个打包工具，而你应该已经猜到了，我的选择正是 。最终我想达到的效果是这样的：
+-- library.js (es5)
+-- library.min.js (es5)
+-- index.js (es6)
+-- helpers.js (es6)
+-- lib|&& +-- library.js (es5)|&& +-- library.min.js (es5)+-- src&&&&+-- index.js (es6)&&&&+-- helpers.js (es6)
在运行任务方面，npm 提供了一套不错的机制——（脚本）。我们至少需要注册以下三个脚本：
"scripts": {
"build": "...",
"dev": "...",
"test": "..."
"scripts": {&&"build": "...",&&"dev": "...",&&"test": "..."}
npm run build – 这个脚本用来生成这个类库的最终压缩版文件。
npm run dev – 跟 build 类似，但它并不压缩代码；此外还需要启动一个监视进程。
npm run test – 用来运行测试。
构建开发版本
npm run dev 需要调用 webpack 并生成 lib/library.js 文件。我们从 webpack 的配置文件开始着手：
JavaScript
// webpack.config.js
var webpack = require('webpack');
var path = require('path');
var libraryName = 'library';
var outputFile = libraryName + '.js';
var config = {
entry: __dirname + '/src/index.js',
devtool: 'source-map',
path: __dirname + '/lib',
filename: outputFile,
library: libraryName,
libraryTarget: 'umd',
umdNamedDefine: true
loaders: [
test: /(\.jsx|\.js)$/,
loader: 'babel',
exclude: /(node_modules|bower_components)/
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/
resolve: {
root: path.resolve('./src'),
extensions: ['', '.js']
module.exports =
12345678910111213141516171819202122232425262728293031323334353637
// webpack.config.js var webpack = require('webpack');var path = require('path');var libraryName = 'library';var outputFile = libraryName + '.js';&var config = {&&entry: __dirname + '/src/index.js',&&devtool: 'source-map',&&output: {&&&&path: __dirname + '/lib',&&&&filename: outputFile,&&&&library: libraryName,&&&&libraryTarget: 'umd',&&&&umdNamedDefine: true&&},&&module: {&&&&loaders: [&&&&&&{&&&&&&&&test: /(\.jsx|\.js)$/,&&&&&&&&loader: 'babel',&&&&&&&&exclude: /(node_modules|bower_components)/&&&&&&},&&&&&&{&&&&&&&&test: /(\.jsx|\.js)$/,&&&&&&&&loader: "eslint-loader",&&&&&&&&exclude: /node_modules/&&&&&&}&&&&]&&},&&resolve: {&&&&root: path.resolve('./src'),&&&&extensions: ['', '.js']&&}};&module.exports = config;
即使你还没有使用 webpack 的经验，你或许也可以看明白这个配置文件做了些什么。我们定义了这个编译过程的输入（entry）和输出（output）。那个 module 属性指定了每个文件在处理过程中将被哪些模块处理。在我们的这个例子中，需要用到 Babel 和 ，其中 ESLint 用来校验代码的语法和正确性。
这里有一个坑，花了我不少的时间。这个坑是关于 library、libraryTarget 和 umdNamedDefine 属性的。最开始我没有把它们写到配置中，结果编译结果就成了下面这个样子：
JavaScript
(function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
if(installedModules[moduleId]) return installedModules[moduleId].
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.loaded =
return module.
__webpack_require__.m =
__webpack_require__.c = installedM
__webpack_require__.p = "";
return __webpack_require__(0);
function(module, exports) {
// ... my code here
1234567891011121314151617181920212223242526
(function(modules) {&&var installedModules = {};&&&function __webpack_require__(moduleId) {&&&&if(installedModules[moduleId]) return installedModules[moduleId].exports;&&&&&var module = installedModules[moduleId] = {&&&&&&exports: {},&&&&&&id: moduleId,&&&&&&loaded: false&&&&};&&&&modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);&&&&module.loaded = true;&&&&return module.exports;&&}&&&__webpack_require__.m = modules;&&__webpack_require__.c = installedModules;&&__webpack_require__.p = "";&&&return __webpack_require__(0);})([&&function(module, exports) {&&&&// ... my code here&&}]);
经过 webpack 编译之后的文件差不多都是这个样子。它采用的方式跟
很类似。编译结果是一个自调用的函数，它会接收应用程序中所用到的所有模块。每个模块都被存放到到 modules 数组中。上面这段代码只包含了一个模块，而 __webpack_require__(0) 实际上相当于运行 src/index.js 文件中的代码。
光是得到这样一个打包文件，并没有满足我们在文章开头所提到的所有需求，因为我们还没有导出任何东西。这个文件的运行结果在网页中必定会被丢弃。不过，如果我们加上 library、libraryTarget 和umdNamedDefine，就可以让 webpack 在文件顶部注入一小段非常漂亮的代码片断：
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("library", [], factory);
else if(typeof exports === 'object')
exports["library"] = factory();
root["library"] = factory();
})(this, function() {
return (function(modules) {
12345678910111213
(function webpackUniversalModuleDefinition(root, factory) {&&if(typeof exports === 'object' && typeof module === 'object')&&&&module.exports = factory();&&else if(typeof define === 'function' && define.amd)&&&&define("library", [], factory);&&else if(typeof exports === 'object')&&&&exports["library"] = factory();&&else&&&&root["library"] = factory();})(this, function() {return (function(modules) { ... ...
把 libraryTarget 设定为 umd 表示采用
来生成最终结果。而且这段代码确实可以识别不同的运行环境，并为我们的类库提供一个妥当的初始化机制。
构建生产环境所需的版本
对 webpack 来说，开发阶段与生产阶段之间唯一的区别在于压缩。运行 npm run build 应该生成一个压缩版——library.min.js。webpack 有一个不错的内置插件可以做到这一点：
JavaScript
// webpack.config.js
var UglifyJsPlugin = webpack.optimize.UglifyJsP
var env = process.env.WEBPACK_ENV;
var libraryName = 'library';
var plugins = [], outputF
if (env === 'build') {
plugins.push(new UglifyJsPlugin({ minimize: true }));
outputFile = libraryName + '.min.js';
outputFile = libraryName + '.js';
var config = {
entry: __dirname + '/src/index.js',
devtool: 'source-map',
output: { ... },
module: { ... },
resolve: { ... },
plugins: plugins
module.exports =
12345678910111213141516171819202122232425
// webpack.config.js ...var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;var env = process.env.WEBPACK_ENV;&var libraryName = 'library';var plugins = [], outputFile;&if (env === 'build') {&&plugins.push(new UglifyJsPlugin({ minimize: true }));&&outputFile = libraryName + '.min.js';} else {&&outputFile = libraryName + '.js';}&var config = {&&entry: __dirname + '/src/index.js',&&devtool: 'source-map',&&output: { ... },&&module: { ... },&&resolve: { ... },&&plugins: plugins};&module.exports = config;
只要我们把 UglifyJsPlugin 加入到 plugins 数组中，它就可以完成这个任务。此外，还一些事情有待明确。我们还需要某种条件判断逻辑，来告诉 webpack 需要生成哪一种类型（“开发阶段” 还是 “生产阶段”）的打包文件。一个常见的做法是定义一个环境变量，并将它通过命令行传进去。比如这样：
JavaScript
// package.json
"scripts": {
"build": "WEBPACK_ENV=build webpack",
"dev": "WEBPACK_ENV=dev webpack --progress --colors --watch"
// package.json "scripts": {&&"build": "WEBPACK_ENV=build webpack",&&"dev": "WEBPACK_ENV=dev webpack --progress --colors --watch"}
（请留意 --watch 选项。它会让 webpack 监视文件变化并持续运行构建任务。）
我通常采用
来运行测试——测试环节是这篇起步教程特有的内容。这里同样存在一个棘手的问题，就是如何让 Mocha 正确识别用 ES6 写的测试文件。不过谢天谢地，Babel 再次解决了这个问题。
JavaScript
// package.json
"scripts": {
"test": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
// package.json"scripts": {&&...&&"test": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"}
这里最关键的部分在于 --compilers 这个选项。它允许我们在运行测试文件之前预先处理这个文件。
其它配置文件
在最新的 6.x 版本中，Babel 发生了一些重大的变化。现在，在指定哪些代码转换器将被启用时，我们需要面对一种叫作 presets 的东西。最简单配置的方法就是写一个 .babelrc 文件：
JavaScript
// .babelrc {
"presets": ["es2015"],
"plugins": ["babel-plugin-add-module-exports"]
// .babelrc {&&"presets": ["es2015"],&&"plugins": ["babel-plugin-add-module-exports"]}
ESLint 也需要一个类似的配置文件，叫作 .eslintrc：
// .eslintrc {
"ecmaFeatures": {
"globalReturn": true,
"jsx": true,
"modules": true
"browser": true,
"es6": true,
"node": true
"globals": {
"document": false,
"escape": false,
"navigator": false,
"unescape": false,
"window": false,
"describe": true,
"before": true,
"it": true,
"expect": true,
"sinon": true
"parser": "babel-eslint",
"plugins": [],
"rules": {
// ... lots of lots of rules here
1234567891011121314151617181920212223242526272829
// .eslintrc {&&"ecmaFeatures": {&&&&"globalReturn": true,&&&&"jsx": true,&&&&"modules": true&&},&&"env": {&&&&"browser": true,&&&&"es6": true,&&&&"node": true&&},&&"globals": {&&&&"document": false,&&&&"escape": false,&&&&"navigator": false,&&&&"unescape": false,&&&&"window": false,&&&&"describe": true,&&&&"before": true,&&&&"it": true,&&&&"expect": true,&&&&"sinon": true&&},&&"parser": "babel-eslint",&&"plugins": [],&&"rules": {&&&&// ... lots of lots of rules here&&}}
这篇起步教程还可以在 GitHub 上找到：。
用到的项目如下：
具体依赖如下：
// package.json
"devDependencies": {
"babel": "6.3.13",
"babel-core": "6.1.18",
"babel-eslint": "4.1.3",
"babel-loader": "6.1.0",
"babel-plugin-add-module-exports": "0.1.2",
"babel-preset-es2015": "6.3.13",
"chai": "3.4.1",
"eslint": "1.7.2",
"eslint-loader": "1.1.0",
"mocha": "2.3.4",
"webpack": "1.12.9"
1234567891011121314
// package.json"devDependencies": {&&"babel": "6.3.13",&&"babel-core": "6.1.18",&&"babel-eslint": "4.1.3",&&"babel-loader": "6.1.0",&&"babel-plugin-add-module-exports": "0.1.2",&&"babel-preset-es2015": "6.3.13",&&"chai": "3.4.1",&&"eslint": "1.7.2",&&"eslint-loader": "1.1.0",&&"mocha": "2.3.4",&&"webpack": "1.12.9"}
是不是意犹未尽？其实准确来说，这篇文章是作者对 webpack-library-starter 项目的一个简要解说，讲解了代码之外的背景知识。
因此，作为学习者，光读文章是远远不够的，我们真正需要的是研读这个项目提供的源码，并且动手实际操作和演练，如此方能掌握要领。加油！
关于作者：
可能感兴趣的话题
o 140 回复
o 123 回复
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线