快速安装node,webpack,react,babel

首先在安装React webpack前，我们先把node安装上

一、安装node

1）根据个人电脑的情况，选择相对的http://nodejs.cn/download/（可以参考的地址）

2）安装时一路next就可以

3）安装完成可以在cmd 输入命令node -v可以查看版本 

二、安装npm

 

1）由于新版node基于npm，所以在安装完node，npm就安装完成了

2）可以在cmd 输入命令 npm -v可以查看版本号

三、安装React

 

1）在安装react前提一下，我们可以安装使用淘宝定制的cnpm可代替npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

2）用create-react-app构建react的开发环境

cnpm install -g create-react-app

    -g代表安装在全局 -d代表安装在当前目录下

create-react-app my-app（创建一个目录为my-app的文件）

cd my-app （进入到my-app文件下）

npm start （启动项目）

四、安装webpack

 

1）使用npm安装webpack 可以再cmd输入命令 npm install -g webpack

2）随后安装webpack依赖 npm install webpack --save-dev

3）如果需要使用webpack，则需单独安装 npm install webpack-dev-server --save-dev

五、安装babel

 

1）在全局下使用babel用于命令转码

npm install -g babel-cli（安装在全局下）

2）需要在项目中安装

npm install babel-cli --save-dev

3）安装转码规则

npm install --save-dev babel-preset-es2015

4）如果查看babel是否安装成功，可查看package.json

 

    "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
    }

配置 .babelrc

在跟目录下建立新文件.babelrc

{
"presets": [
"es2015"
],
"plugins": [
]
}
其中presets是规则，plugins是插件支持。

接下来就可以转码了用

babel  原文件.js -o 转换文件.js。-o表示out-file 写入文件。

每次转码都需要打很多东西，我们可以直接再package.json中修改

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},

修改以后我们就可以直接用npm run build转码了。