配置babel-cli

局部配置

1.新建一个文件夹package（名字可以随便起）

2、打开cmd命令窗口

3、cd：package的路友雹穗径

npm init

4、需要用jquery，可以安装jquery

npm install --save-dev jquery

5、在cmd窗口输入：

安装babel-cli：

cnpm install --save-dev babel-cli

cnpm install babel-preset-env --save-dev

百度搜索babel进入官网

切换版本

2）

在package文件夹下：

6、在package文件夹下：

1）、 新建一个build文件夹里面存放转译后的js文件

2）、新建一个js文件存肆宽放es6语法的js文件

3）、在package.json里输入build: babel js -d build

4）、

新建文件.babelrc,在里面粘贴 { "presets": ["env"] }

7、cmd进入package文件夹下输入：好卜

注：package.json文件：(以后参考版本用)

使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。

react安装

当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。

# npm install react react-dom –save

react安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。

react解析器babel安装

babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_modules下。

# npm install babel-core babel-loader babel-preset-react –save-dev

//本地安装

#npm install babel-core babel-loader babel-preset-react –g

//全局安装

一般情况下我们选择本地安装，这样便于管理。

打包工具webpack的安装

同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。

# npm install webpack –save-dev

//本地安装

# npm install webpack –g

//全局安装

如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。

这里我们选择全局安装。这样才能出现我们将要说的问题。

webpack配置文件编写

安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。

代码一

module:{

loaders: [

{

test: /#92.js$/,

loader: #39babel#39,

query:{

presets:[#39react#39]

}

}

]

}

编译过程中出现的错误茄腊御

好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。

接下来我们就要编译打包我们的项目。

# webpack

执行该命令以后，你会发现出现如下的错误：

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js

Module build failed: Error: Couldn#39t find preset "局告react" relative to

directory

"/node/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/process"

……

这也就是说找不到babel-preset-react。

好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问颤岩题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。

解决问题的方式

出现上述问题以后，我们有这样三种方式可以解决。

方式一

要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。

query:{

presets:[#39react#39]

}

好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。

#npm remove babel-core babel-loader babel-preset-react –save-dev

//首先移除原先安装的babel

#npm install babel-core babel-loader babel-preset-react –g

//全局安装

没错，问题解决了。但是我们不使用这种方式。因为这样不便于管理，所以还是使用其他的方式。

方式二

此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。

# npm remove webpack –g

//移除原先的webpack

# npm install webpack –save-dev

//将webpack安装到本地位置——也就是项目目录下的node_modules中

# ln –s /项目根目录/node_modules/webpack/bin/webpack.js /usr/bin/webpack

//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）

//这样我们就可以在任意位置直接使用webpack命令了。

此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。

此种方式较方式一，我个人比较这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。

方式三

该方式应该说是最值得的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。

代码二

module:{

loaders: [

{

test: /#92.js$/,

loader: #39babel#39,

exclude:/node_modules/,

query:{

presets:[#39react#39]

}

}

]

}

1.npm安装：npm i element-ui -S

2.全局完整引入

2.按需引入

（1）首先，安装 babel-plugin-component，借助  babel-plugin-component ，运拆我们可以只手乎引入需毕悄悉要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

（2）

（3）

---