一步步建立一个React App,项目基本配置,包括单元测试

前期准备阶段:

mkdir my-app - 新建空文件夹

cd my-app - 进入文件夹

npm init 生成 package.json 文件, 一路点击回车,保持默认就好

安装各种需要的依赖:

npm install --save react - 安装React.

npm install --save react-dom 安装React Dom

npm install --save-dev webpack - 安装Webpack,模块打包工具.

npm install -- save-dev webpack-cli - 安装webpack-cli

npm install --save-dev webpack-dev-server - webpack官网出的一个小型express服务器，支持热加载.

npm install --save-dev babel-core - 安装Babel, 可以把ES6转换为ES5, 所以可以在项目中自由使用ES6, (这里只装核心)

安装其他的babel依赖全家桶:

npm install --save babel-polyfill - Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

npm install --save-dev babel-loader - webpack中需要用到的loader.必须同时安装babel-core

npm install --save babel-runtime - Babel transform runtime 插件的依赖.

npm install --save-dev babel-plugin-transform-runtime - 许多常用的垫片函数会在多个文件里面重复出现，启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数，将这些重复的函数整合。babel-polyfill的许多函数会污染全局作用域，转换器transformer会将这些内置（垫片）设置别名到core-js中（避免全局污染）, 假如用了babel-polyfill，最好把这个用上。注意：该模块依赖babel-runtime

npm install --save-dev babel-preset-es2015 - 打包了一组插件，类似于餐厅的套餐。 babel-preset-es2015 打包了 es6 的特性

npm install --save-dev babel-preset-react - Strip flow types and transform JSX into createElement calls.

npm install --save-dev babel-preset-stage-2 - All you need to use stage 2 (and greater) plugins (experimental javascript).

各种配置项:

打开 package.json 然后添加下面的scripts:

"scripts": {
  "start": "webpack-dev-server --hot --inline --colors --content-base --host 127.0.0.1 --port 3001",
  "build": "webpack --progress --colors"
}

在项目根目录下创建文件webpack.config.js, 作为web pack的配置文件,

// webpack.config.js
var webpack = require('webpack');
module.exports = {
  entry: './src/app.js',
  output: {
      path: __dirname + '/build',
      filename: "bundle.js"
  },
  module: {
      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
              plugins: ['transform-runtime'],
              presets: ['es2015', 'react', 'stage-2']
          }
      }, {
          test: /\.css$/,
          loader: "style-loader!css-loader"
      }]
  }
};

在根目录下新建文件.babelrc, 这是bable的配置文件, 把下面内容粘贴进去

{
  "presets": [
    [
      "es2015",
      {
        "module": false
      }
    ],
    "react",
    "stage-2"
  ]
}

首先我们在项目根目录中新建一个 index.html 文件。在这个基础工程中, 我们使用bootstrap的样式，直接引入一个cdn即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

建立一个新的文件夹 src. 我们app的大部分代码都将放在这个文件夹里面。在 src 中建立 app.js，作为React App的根组件，其他所有的组件都会注入到这个跟组件中。

// app.js
import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
  render(){
    return(
      <div>
        就不说Hello World!
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

如果不用单元测试,到这里就完成了.

命令行输入 npm run build 将会进行生产环境打包.

命令行输入 npm start 将要启动webpack dev server. 在浏览器输入http://127.0.0.1:3001/, 可看到项目已经启动

安装单元测试依赖:

npm install --save-dev jest - 安装jest

npm install --save-dev enzyme - 安装enzyme

npm install --save-dev enzyme-adapter-react-16 - 版本要和安装的react一致

在package.json里添加

"scripts": {
  "test": "jest --coverage",
}

添加jest配置

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      ".*\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  },

在项目更目录下新建文件夹__tests__, 里边放测试文件. 新建app.test.js

import React from 'react';

import App from '../src/app';

import { shallow } from 'enzyme';

import Enzyme from 'enzyme';

import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const setup = () => {

  // 模拟 props

  const props = {}

  // 通过 enzyme 提供的 shallow(浅渲染) 创建组件

  const wrapper = shallow(<App {...props} />)

  return {

    props,

    wrapper

  }

}

describe('a test', () => {

  it('renders three <App /> components', () => {

    const { wrapper } = setup();

    expect(wrapper.find('div').exists());

  });

});

describe('test', () => {

  it('two plus two is four', () => {

    expect(2 + 2).toBe(4);

  });

});

在终端输入npm test进行测试.

在app.js里报了一个错误"Invariant Violation: Target container is not a DOM element.", 将app.js里面的"ReactDOM.render(<App />, document.getElementById('app'));"注释掉再运行npm test就好了.