Skip to content

Latest commit

 

History

History
88 lines (82 loc) · 3.46 KB

开发环境.md

File metadata and controls

88 lines (82 loc) · 3.46 KB
Raw
  1. 首先，任意文件夹下新建目录，这里假设工程名为 first-react-app:
$ mkdir first-react-app && cd first-react-app

安装 Node.js，这里推荐使用 NVM 来管理不同的 Node.js 版本。NVM 的安装方法可以参考 GitHub 上 NVM 的文档，比如使用curl 来下载安装脚本：

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

你在安装时，请参考最新的文档。接着，运行 NVM 的命令来安装固定版本的 Node.js 并使用它，这里安装 Node 5.0 版本：

# Install Node
$ nvm install 5.0

# Use Node
$ nvm use 5.0

然后回到 first-react-app 目录下，我们需要新建一个 Node.js 的配置文件 package.json。这里既可以通过 npm init 交互的方式来新建，也可以手动新建。下面是新建好的 package.json：

{
  "name": "first-react-app",
  "version": "1.0.0",
  "description": "first react app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react",
    "reactjs"
  ],
  "author": "Honye",
  "license": "MIT"
}

这里定义了项目的名字、版本号、描述、关键词、作者和许可协议这些基本信息。对于没一个 Node.js 项目来说，这些基本信息都是必不不少的。 如果这个项目需要上传到 Git 仓库，那么需要在根目录下执行 git init 命令初始化项目，并在 package.json 中增加必要的信息。下面就以 Github 为例来介绍：

"repository": {
  	"type": "git",
  	"url": "https://github.com/arcthur/first-react-app.git"
  },
  "bugs": {
  	"url": "https://github.com/arcthur/first-react-app/issues"
  },
  "homepage": "https://github.com/arcthur/first-react-app"

对应的是仓库配置、bug提交地址以及项目主页。这里项目主页直接使用了仓库主页，当然也可以使用如独立域名的主页地址来替代。

ES6 编译工具：Babel

安装：

$ npm install --save-dev babel-cli babel-core babel-polyfill babel-preset-es2015 babel-preset-react

其中 babel-preset-es2015 和 babel-preset-react 可以理解为我们选择安装了两个套餐，分别时 ES6 和 React 的编译插件集。我们需要在项目中新建一个 .babelrc 的配置文件，这个文件用来设置不同环境的转码插件，默认作用域是所有环境，你也可以区分开发环境和线上环境。现在我们把需要的 preset 加入到配置中：

{
	presets: ["es2015", "react"]
}

测试环境：Karma

安装 Karma 环境和必要的包：

$ npm install --save-dev karma karma-chai karma-chrome-launcher karma-coverage karma-coveralls karma-mocha karma-sourcemap-loader karma-webpack istanbul-instrumenter-loader

工程构建工具：webpack

通过 npm 安装 webpack：

$ npm install --save-dev webpack

安装 webpack 配套的 Web 服务器 webpack-dev-server：

$ npm install --save-dev webpack-dev-server

另外，需要加载一些 loader，这里我们安装了编译 Sass 的 sass loader，打包样式的 style 和 css loader，Babel 编译的 loader，React 热加载的 loader：

$ npm install --save-dev babel-loader sass-loader style-loader css-loader react-hot-loader

安装 React 环境

$ npm install --save react react-dom