ReactJS开发环境搭建与相关工具介绍

时间 2019-11-18

标签 reactjs 开发环境搭建相关工具介绍繁體版

原文原文链接

如今Web开发的技术几年前相比可谓变化之大。各类各样的框架，各类各样的工具，让Web开发效率更高，开发出来的效果更好。同时带来的是开发环境的复杂度相比之前是成倍的增长。ReatJS框架是如今比较流行的Web前端框架。在搭建开发环境是我采用的主要工具是npm+babel+visual studio code+browerify。javascript

npmhtml

npm 是node.js环境下的一个javascript包管理管理工具. 在安装node.js后,npm也就一块儿安装了。npm会基于某个目录来管理该目录下应用对各个包的依赖。So,咱们首先须要为这个目录初始化npm的环境。在该目录下执行npm init命令来进行初始化前端

初始化过程当中会提示输入该目录下应用的名字，版本等信息，如实填写或采用默认便可。初始化后会在目录下生成package.json文件，这是对该目录（应用）的npm配置。后续使用npm添加的各类包的依赖都会添加到该文件中。java

{
  "name": "reactjssetup",
  "version": "1.0.0",
  "description": "blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"，
　　 "globalLocation":"npm config get prefix"

  },
  "author": "",
  "license": "ISC"
}

package.json文件中有一个scripts属性，值为json对象，json对象的每一个key/value对应咱们能够在npm环境下执行的script名和所表明的处理过程。咱们能够经过以下npm命令来运行该script:npm run-script {script名}. 咱们一般能够经过该途径来添加一些经常使用批处理操做。好比上面咱们添加了key为globalLocation的script来得到当前global库存放的路径，经过执行npm run-script globalLocation咱们能够的到以下结果：node

接下来咱们能够经过npm install --save react react-dom添加react和react-dom库到咱们的目录(应用)中.命令执行完后会在目录下生成node_modules目录，全部咱们添加的本地依赖库都会被放到这个文件夹下。同时package.json文件会被更行。看一下更新后的package.json文件:react

{
  "name": "reactjssetup",
  "version": "1.0.0",
  "description": "blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "globalLocation": "npm config get prefix"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

添加了dependencies属性，并添加了两个依赖库(react,react-dom)的名字和版本信息，版本信息采用semver规则.npm

到这里，咱们经过npm管理了咱们应用所依赖的库。json

Babel浏览器

如今大部分浏览器只支持ES5版本的JS,而ReactJS开发中比较推荐使用ES6版本的JS进行开发，Babel就是将ES6版本的JS代码转换为ES5版本的JS代码的工具库。咱们首先须要经过npm install --save-dev babel来安装babel库。这里用到了--save-dev参数，它表示应用只在dev环境下依赖这个库，在产品环境不会依赖。由于咱们只须要在dev环境下转换咱们的代码的时候须要这个库，所以他是dev环境依赖。前端框架

安装完babel后，咱们还须要对它进行配置。babel的配置是要保存在应用根目录的.babelrc文件下,该文件默认不会被建立，须要咱们手动建立。主要的配置是添加Babel转换代码时使用的preset(就是针对各类JS语法到ES5语法的转换规则库)。在配置以前，咱们首先须要安装这些preset:babel-preset-react,babel-preset-es2015.而后在将其添加到.babelrc文件中。修改后的.babelrc文件以下：

{
    "presets":["babel-preset-react","babel-preset-es2015"]  
}

Babel就配置好了，咱们能够单独使用babel命令去转换JS代码，也能够结合打包工具来在打包过程当中先对代码进行转换。我使用的是browerify打包工具结合babel来转换。

Visual Studio Code

在Visual Studio Code中只需打开咱们的应用的根目录，无需建立任何相似于Visual Studio依赖的sln文件便可coding.在coding以前咱们须要安装一些插件来使咱们的开发过程变得高效。我主要安装了以下插件。

-build
-src
--index.js
-index.html

index.html中咱们输入以下内容：

<html>
    <meta charset="utf-8">
    <body>
        <div id="root">
            
        </div>
    </body>
</html>

--index.js中来用ReactJS定义咱们的页面内容。

import React from "react";
import ReactDOM from "react-dom";

class HelloWorldComponent extends React.Component {
    constructor(prop){
        super(prop);
    }
    render() {
        return (
            <div>Hello World</div>
        );
    }
}

ReactDOM.render(<HelloWorldComponent/>,document.getElementById("root"));

到此，咱们完成了一个会显示Hello World字符串的页面。可是咱们的index.html并无引用index.js,也没有引用任何reactjs的依赖。所以下一步咱们须要借助Browerify来将这些文件打包，并创建链接。

Browerify

首先经过npm install --save-dev browserify来安装browserify到本地项目文件夹中。

而后配置build的脚本到npm 的package.json文件中。配置以下：

"scripts": {
    "build": "browserify -t babelify src/index.js -o build/bundle.js"
  },

脚本中咱们经过给browserify添加了-t参数用来指定javascript转换器为babelify(需经过npm install --save-dev babelify安装到本地项目)。

而后咱们能够在控制台运行npm run-script build来执行打包操做。全部依赖的库以及index.js都会打包到bundle.js中。

引用bundle.js

最后咱们须要在index.html中引用bundle.js

<html>
    <meta charset="utf-8">
    <body>
        <div id="root">
            
        </div>
        <script type="text/javascript" src="build/bundle.js"></script>
    </body>
</html>

浏览index.html查看网页