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查看網頁

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。