(轉)React幾種基本配置方案

時間  2019-11-09
標籤 react 幾種 基本 配置 方案 欄目 React 简体版
原文   原文鏈接

學習React應該基於建立項目特定類型的設置細節之上(好比Webpack、Redux、ES六、JSX、Babel等)，而不是一會兒就去忙於理解全部的設置項。css

在這篇文章中列出了有關於React方面的七種設置。大部分的設置我都將會向你們展現，但總的來講，這並不困難。接下來的內容從簡單到複雜，介紹React的設置。html

方法1：只使用React，不使用JSX

若是在React項目中決定不使用JSX，又想渲染HTML DOM。那麼在準備寫React代碼以前，在你的HTML頁面須要引入一個react.js和react-dom.js文件。node

react.js文件是建立React節點和組件所須要的核心文件。當你打算在一個HTML中渲染一個組件（好比DOM）還須要react-dom.js文件。react-dom.js文件依賴於react.js文件，因此在引入react-dom.js文件以前要先引入react.js文件。好比下面的示例：react

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>React</title>
 6     <script src="./src/js/react.js"></script>
 7     <script src="./src/js/react-dom.js"></script>
 8 </head>
 9 <body>
10 
11 </body>
12 </html>

在HTML頁面中使用react.js和react-dom.js文件，就能夠建立React節點或組件，而後渲染成DOM。接下來建立一個名叫HelloMessage的React組件，而且放到<div>的React節點中，最後渲染到<div id="app"></div>的HTML元素內。webpack

 1 <body>
 2     <div id="app"></div>
 3     <script>
 4         var HelloMessage = React.createClass ({
 5             displayName: "HelloMessage",
 6             render: function render () {
 7                 return React.createElement("div", null, "Hello ", this.props.name);
 8             }
 9         });
10         ReactDOM.render(React.createElement(HelloMessage, {name: "John"}), document.getElementById("app"));
11     </script>
12 </body>

這樣使用不需利用JSX或ES 2015。git

方法2：經過browser.js轉換JSX/ES 2015(非生產設置)

能夠按前面的方式，在HTML頁面中添加一個額外的腳本，容許使用JSX/ES2015。而後在客戶端使用Babel來轉換JSX並非一個適於生產。在客戶端運行時處理JSX/ES2015時負擔很重，但對於非生產環境下在HTML中添加browser.js文件，能夠在客戶端中運行時轉換JSX。es6

在HTML頁面中使用JSX來實現前面示例中HelloMessage組件:github

 1 <body>
 2     <div id="app"></div>
 3     <script type="text/babel">
 4         const HelloMessage = React.createClass({
 5             render: function (){
 6                 return <div>Hello {this.props.name}</div>;
 7             }
 8         });
 9         ReactDOM.render(<HelloMessage name="Jhon" />, document.getElementById("app"));
10     </script>
11 </body>

 

代碼的轉換髮生了，那是由於咱們引入了browser.js的Babel文件，而且給<script>元素設置type屬性的值爲type="text/babel"。當browser.js加載後將找到有關於type="text/babel"的腳本，而且將JSX/ES2015轉換成ES5 JavaScript。例如，下面代碼就是轉換後的代碼：web

 1 var HelloMessage = React.createClass({
 2     displayName: "HelloMessage",
 3 
 4     render: function render() {
 5         return React.createElement(
 6             "div",
 7             null,
 8             "Hello ",
 9             this.props.name
10         );
11     }
12 });
13 
14 ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.getElementById('app'));

注意，對於Babel項目，使用Babel6將再也不須要提供browser.js就能夠將JSX代碼轉換成ES5代碼。所以，若是你使用的是老版本的Babel(好比5.8.23版本),須要提供browser.js文件轉換JSX/ES*。ajax

方法3：經過system.js/browser.js在瀏覽器中轉找JSX/ES 2015（非生產設置）

接下來可能讓你有所激動，至少我是這樣。經過jspm CDN加載SystemJS，在運行瀏覽器時將會解決有關於React，JSX和Babel（好比動態加載）的一些細節。

你所須要作的就是提供下面這樣的一個HTML文件：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="https://jspm.io/system@0.19.js"></script>
 7     <script>
 8         System.config({
 9             transpiler: "babel",
10             babelOptions: {}
11         });
12         System.import('./main.js');
13     </script>
14 </head>
15 <body>
16 
17 </body>
18 </html>

 

在main.js文件中引入所須要依賴的文件：

1 import React from "react"
2 import ReactDOM from "react-dom"
3 
4 const Hello = ({name}) => <h1>Hello {name}!</h1>
5 
6 ReactDOM.render(
7     <Hello name={"dude"} />,
8     document.body.appendChild(document.createElement("div"))
9 )

你不須要安裝或下載任何文件就能正常運行。當頁面加載以後，它將得到全部必要的依賴關係，包括Babel。能夠經過Chrome的開發者工具中的"source"面板查看到所加載的一切：

React設置

jspn CDN工做原理就相似於npmcdn.com。使用depCache injnection發送壓縮後源碼覆蓋HTTP/2，使用這種方法可能適合在生產環境中使用。

如今你可能想這隻會使用名爲jspm包（即jspm註冊表中定義過的包），其實你錯了。你能夠繞過jspm，經過npm來安裝包。固然，你必須經過一個package.json文件告訴jspm你要安裝的包。例如你可使用這種方式安裝ES 2015模塊。

1 import picturefill from 'github:scottjehl/picturefill'
2 import async from 'npm:async'

這些開發算是強大的，但在生產中也有一些潛在的未知工具，好比SPDY和HTTP/2。

方法4：使用在線編輯器建立React

當你須要快速設置React，而且分享React的「僞代碼」(pseudocode)，你可在在線編輯器(好比，jsbin或jsfiddle)上操做，好比前面的一些設置均可以在上面編輯。

最快和最容易的設置React可使用JS Bin在線編輯器等。

方法5：在開發過程當中使用Babel-cli和npm轉換JSX/ES 2015

在整個代碼開發過程當中，可使用Babel-cli、Bable預設/插件和npm將JSX/ES 2015代碼轉成ES5代碼。

接下來分七個步驟來介紹整個實現過程。或者使用Github上預設的代碼根據下面四個步驟來完成整個設置。

  • 克隆/下載整個代碼
  • 遵循下面的步驟一
  • 在克隆下來的項目目錄下運行npm install
  • 遵循下面的最後一步

第一步：肯定安裝了node.js和npm，而後安裝全局packages

在這一步中，確保你已經安裝了node.js和npm，而且確保其版本是最新的穩定版本。而後運行下面的命令安裝browser-sync。

 1 npm install browser-sync -g 

若是安裝全局的包有可能須要在命令前添加sudo。

第二步：建立目錄和文件

在你本地文件系統中建立目錄而且按照下面的方式建立子目錄和文件：

├── index.html
├── build
├── src
│    └── app.js
└── package.json

打開package.json文件，而且建立一個空的JSON對象：

{

}

第三步：經過npm安裝依賴關係

在第二步建立的根目錄下運行下面的npm命令：

 npm install babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync --save-dev 

和：

 npm install react react-dom --save 

運行上面兩行命令將會安裝必要的npm包。如今根目錄中增長了一個node_modules文件夾，而且須要的npm包都放在這個文件夾下：

├── index.html
├── build
├── src
│   └── app.js
├── node_modules
│   ├── babel-cli
│   ├── babel-preset-es2015
│   ├── babel-preset-react
│   ├── babel-preset-stage-0
│   ├── browser-sync
│   ├── react
│   └── react-dom
└── package.json

第四步：配置Babel和npm

打開package.json文件，你看到的樣子像下面這樣：

{
  "devDependencies": {
    "babel-cli": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "browser-sync": "^2.12.8"
  },
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

在package.json文件中添加Babel和腳本配置：

{
    "scripts": {
        "babel": "babel src --out-dir build -w",
        "server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"**/*.css\" \"build/**/*.js\" "
    },
    "babel": {
        "presets": [
            "es2015",
            "react"
        ],
        "sourceMaps": false
    },
    "devDependencies": {
        "babel-cli": "^6.9.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "browser-sync": "^2.12.8"
    },
    "dependencies": {
        "react": "^15.1.0",
        "react-dom": "^15.1.0"
    }
}

運行npm cli，更新Babel配置，而且提供兩個script。

第五步： 更新index.html

打開index.html文件，而且將下面的代碼複製到HTML文件中：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>React via Babel</title>
 6     <script src="node_modules/react/dist/react.js"></script>
 7     <script src="node_modules/react-dom/dist/react-dom.js"></script>
 8 </head>
 9 <body>
10     <div id="app"></div>
11     <script src="build/app.js"></script>
12 </body>
13 </html>

注意：從node_modules目錄中添加react.js和react-dom.js文件。

第六步：更新app.js

打開app.js文件，而且將下面的JavaScript代碼複製到app.js文件中：

1 const HelloMessage = React.createClass({
2     render: function() {
3         return <div > Hello { this.props.name } < /div>;
4     }
5 });
6 
7 ReactDOM.render( < HelloMessage name = "John" / > , document.getElementById('app'));

第七步：運行Babel和Server

在根目錄下運行下面的命令：

npm run babel

運行這兩行命令開發的代碼就能跑起來了。

若是你遵循全部的步驟操做，而且沒有出錯的話，那麼Browsersync應該會打開瀏覽器在http://localhost:4000這個地址上加載index.html和app.js。Babel和Browsersync會運行所作的修改。

這個設置不是根據你想要建立一個SPA構建的，而是假定你想利用JSX和ES 2015建立HTML頁面。

方法6：經過Webpack和Babel-core在開發過程當中轉換JSX/ES 2015

這個設置是使用Webpack和幾個加載器將JSX/ES 2015代碼轉換成ES5代碼。經過使用Webpack，JavaScript模塊可使用ES2015模塊加載格式、屬性轉換和捆綁。

將經過下面七個步驟來完成整個配置。或者從GitHub倉庫中預載配置下，按下面的四步完成整個配置。

  • 克隆/下載整個代碼
  • 根據下面的第一步作相應操做
  • 在克隆下來的項目目錄下運行npm install命令
  • 根據下面的最後一步作相應操做

第一步：肯定安裝了node.js和npm，而後安裝全局packages

在這一步中，確保你已經安裝了node.js和npm，而且確保其版本是最新的穩定版本。而後運行下面的命令安裝Webpack和browser-sync。

npm install webpack browser-sync -g

有可能全局安裝須要在命令前添加「sudo」。

第二步：建立目錄和文件

在本地項目中建立須要目錄，而且在其下面建立子目錄和文件。

├── build
├── index.html
├── package.json
├── src
│   ├── app.js
│   ├── app.css
│   └── math.js
└── webpack.config.js

打開package.json文件，而且建立一個空的JSON對象：

{

}

第三步：經過npm安裝依賴關係

在第二步建立的根目錄下運行下面的npm命令安裝所須要的依賴關係:

 npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync css-loader extract-text-webpack-plugin style-loader webpack --save-dev 

接下來運行：

 npm install react react-dom @telerik/kendo-react-buttons --save 

運行上面兩行命令將會安裝必要的npm包。如今根目錄中增長了一個node_modules文件夾，而且將須要的npm包都放在這個文件夾下：

├── build
├── index.html
├── node_modules
│   ├── @telerik
│   ├── babel-core
│   ├── babel-loader
│   ├── babel-preset-es2015
│   ├── babel-preset-react
│   ├── babel-preset-stage-0
│   ├── browser-sync
│   ├── css-loader
│   ├── extract-text-webpack-plugin
│   ├── react
│   ├── react-dom
│   ├── style-loader
│   └── webpack
├── package.json
├── src
│   ├── app.js
│   ├── app.css
│   └── math.js
└── webpack.config.js

第四步：更新app.js，app.css，math.js和index.html

打開app.js文件，而且添加下面的代碼：

 1 import React from 'react';
 2 import ReactDOM from 'react-dom';
 3 import * as KendoReactButtons from '@telerik/kendo-react-buttons';
 4 import '@telerik/kendo-react-buttons/dist/npm/css/main.css';
 5 import { square, diag } from './math.js';
 6 import './app.css';
 7 
 8 console.log(square(11)); // 121
 9 console.log(diag(4, 3)); // 5
10 
11 class ButtonContainer extends React.Component {
12     constructor(props) {
13         super(props);
14         this.state = {
15             disabled: false
16         };
17     }
18     onClick = () => {
19         this.setState({ disabled: !this.state.disabled });
20     }
21     render() {
22         return (
23             <div>
24                 <KendoReactButtons.Button onClick={this.onClick}>Button 1</KendoReactButtons.Button>
25                 <KendoReactButtons.Button disabled={this.state.disabled}>Button 2</KendoReactButtons.Button>
26             </div>
27         );
28     }
29 }
30 
31 ReactDOM.render(
32     <div>
33         <p>Button</p>
34         <KendoReactButtons.Button>Button test</KendoReactButtons.Button>
35         <p>Disabled Button</p>
36         <KendoReactButtons.Button disabled>Button</KendoReactButtons.Button>
37         <p>Primary Button</p>
38         <KendoReactButtons.Button primary>Primary Button</KendoReactButtons.Button>
39         <p>Button with icon</p>
40         <KendoReactButtons.Button icon="refresh">Refresh</KendoReactButtons.Button>
41         <p>Button with icon (imageUrl)</p>
42         <KendoReactButtons.Button imageUrl="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Snowboarding</KendoReactButtons.Button>
43         <p>Button with a custom icon (iconClass) [FontAwesome icon]</p>
44         <KendoReactButtons.Button iconClass="fa fa-key fa-fw">FontAwesome icon</KendoReactButtons.Button>
45         <p>Toggleable Button</p>
46         <KendoReactButtons.Button togglable>Togglable button</KendoReactButtons.Button>
47         <p>onClick event handler</p>
48         <ButtonContainer />
49     </div>,
50     document.getElementById('app')
51 );

打開app.css文件，而且添加下面的代碼：

body{
    margin:50px;
}

打開math.js文件，而且添加下面的代碼：

export const sqrt = Math.sqrt;

export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

打開index.html文件，而且添加下面的代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Webpack</title>
 6     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 7     <link rel="stylesheet" type="text/css" href="./build/style.css">
 8 </head>
 9 <body>
10     <div id="app"></div>
11     <script src="./build/appBundle.js"></script>
12 </body>
13 </html>

 

第五步：更新webpack.config.js

打開webpack.config.js文件，而且添加下面的代碼：

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: ['./src/app.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'appBundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }, {
            loader: 'babel-loader',
            exclude: /node_modules/,
            test: /\.js$/,
            query: {
                presets: ['es2015', 'react', 'stage-0'],
            },
        }]
    },
    plugins: [
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]
};

第六步：更新package.json

打開package.json文件，你能夠看到文件中包括像下面這樣的代碼：

{
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "browser-sync": "^2.12.8",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "@telerik/kendo-react-buttons": "^0.1.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

 

更且在package.json文件中添加scripts相關配置：

{
    "scripts": {
        "webpack": "webpack --watch",
        "server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"build/**/*.css\" \"build/**/*.js\" "
    },
    "devDependencies": {
        "babel-core": "^6.9.0",
        "babel-loader": "^6.2.4",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "browser-sync": "^2.12.8",
        "css-loader": "^0.23.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.1"
    },
    "dependencies": {
        "@telerik/kendo-react-buttons": "^0.1.0",
        "react": "^15.1.0",
        "react-dom": "^15.1.0"
    }
}

 

第七步：運行webpack和server

在你項目根目錄下運行下面的npm命令：

npm run webpack

同時打開另外一個命令窗口運行下面的npm命令：

npm run server

運行這兩行命令開發的代碼就能跑起來了。

若是你遵循全部的步驟操做，而且沒有出錯的話，那麼Browsersync應該會打開瀏覽器在http://localhost:4000這個地址上加載index.html和app.js。Webpack和Browsersync會運行所作的修改。

這只是設置中的冰山一角。根據您正在構建的應用程序的範圍和規模，這個Webpack設置只是最基本的，你能夠在不少方面進行配置和從新配置。徹底能夠從這個基本的配置開始，而後深刻學習Webpack。

方法7：經過Babel-core和SystemJs/jspm.io在開發中轉換JSX/ES 2015

這個React設置使用SystemJs/jspm-cli轉換JSX/ES 2015，加載、和捆綁JavaScript模塊和CSS樣式。

我想我已經把最好的方案留到最後面了。主要是由於SystemJS/jspm處理配置文件和經過cli的解決方案將是將來的趨勢。

接下來經過下面九個步驟來完成整個配置。或者從GitHub倉庫中下載已經預設好的配置，而且按下面的四個步驟完成整個配置。

  • 克隆/下載整個代碼
  • 遵循下面的步驟一操做
  • 在克隆下來的項目目錄下運行npm install && jspm
  • 遵循下面的步驟八操做

步驟一：確保安裝node.js和npm，而後安裝全局packages

在這一步中，確保你已經安裝了node.js和npm，而且確保其版本是最新的穩定版本。而後運行下面的命令安裝jspm和browser-sync。

npm install jspm browser-sync -g

步驟二：建立文件夾和文件

在你的本地建立項目目錄而且在其下面建立相關的子目錄和文件：

├── app.js
├── index.html
├── js
│   └── math.js
├── package.json
└── style
    └── app.css

打開package.json文件，而且建立一個空的JSON對象：

{

}

步驟三：安裝npm依賴關係

在根目錄下運行下面的命令：

npm install jspm browser-sync --save-dev

運行上面命令將會安裝必要的npm包。如今項目根目錄下添加了node_modules和相應的npm包：

├── app.js
├── index.html
├── js
│   └── math.js
├── node_modules
│   ├── browser-sync
│   └── jspm
├── package.json
└── style
    └── app.css

步驟四：初始化SystemJS/JSPM設置

在你項目根目錄下運行下面的jspm-cli命令：

jspm init

將會問你9個問題，每一個問題你只須要按回車鍵就好了。

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

將會在根目錄建立一個config.js文件和一個jspm_packagees文件夾。這時項目的目錄結構像這樣：

├── app.js
├── config.js
├── index.html
├── js
│   └── math.js
├── jspm_packages
│   ├── github
│   ├── npm
│   ├── system-csp-production.js
│   ├── system-csp-production.js.map
│   ├── system-csp-production.src.js
│   ├── system-polyfills.js
│   ├── system-polyfills.js.map
│   ├── system-polyfills.src.js
│   ├── system.js
│   ├── system.js.map
│   └── system.src.js
├── node_modules
│   ├── browser-sync
│   └── jspm
├── package.json
└── style
    └── app.css

 

打開config.js文件，而且更新babelOptions對象,將下面的代碼：

babelOptions: {
    "optional": [
        "runtime",
        "optimisation.modules.system"
    ]
},

更新爲：

babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ],
    "stage": 0
},

步驟五： 更新app.js，app.css，math.js和index.html

打開app.js文件，而且添加下面的代碼：

 1 import './style/app.css!'; //note, had to add the !
 2 import React from 'react';
 3 import ReactDOM from 'react-dom';
 4 import * as KendoReactButtons from '@telerik/kendo-react-buttons';
 5 import '@telerik/kendo-react-buttons/dist/npm/css/main.css!'; //note, had to add the !
 6 import { square, diag } from './js/math.js';
 7 
 8 console.log(square(11)); // 121
 9 console.log(diag(4, 3)); // 5
10 
11 class ButtonContainer extends React.Component {
12     constructor(props) {
13         super(props);
14         this.state = {
15             disabled: false
16         };
17     }
18     onClick = () => {
19         this.setState({ disabled: !this.state.disabled });
20     }
21     render() {
22         return (
23             <div>
24                 <KendoReactButtons.Button onClick={this.onClick}>Button 1</KendoReactButtons.Button>
25                 <KendoReactButtons.Button disabled={this.state.disabled}>Button 2</KendoReactButtons.Button>
26             </div>
27         );
28     }
29 }
30 
31 ReactDOM.render(
32     <div>
33         <p>Button</p>
34         <KendoReactButtons.Button>Button test</KendoReactButtons.Button>
35         <p>Disabled Button</p>
36         <KendoReactButtons.Button disabled>Button</KendoReactButtons.Button>
37         <p>Primary Button</p>
38         <KendoReactButtons.Button primary>Primary Button</KendoReactButtons.Button>
39         <p>Button with icon</p>
40         <KendoReactButtons.Button icon="refresh">Refresh</KendoReactButtons.Button>
41         <p>Button with icon (imageUrl)</p>
42         <KendoReactButtons.Button imageUrl="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Snowboarding</KendoReactButtons.Button>
43         <p>Button with a custom icon (iconClass) [FontAwesome icon]</p>
44         <KendoReactButtons.Button iconClass="fa fa-key fa-fw">FontAwesome icon</KendoReactButtons.Button>
45         <p>Toggleable Button</p>
46         <KendoReactButtons.Button togglable>Togglable button</KendoReactButtons.Button>
47         <p>onClick event handler</p>
48         <ButtonContainer />
49     </div>,
50     document.getElementById('app')
51 );

打開app.css文件，而且添加下面的代碼：

body{
    margin:50px;
}

打開math.js文件，而且添加下面的代碼：

export const sqrt = Math.sqrt;

export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

打開index.html文件，而且添加下面的代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>systemJS/jspm</title>
 6     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 7 </head>
 8 <body>
 9     <div id="app"></div>
10     <script src="jspm_packages/system.js"></script>
11     <script src="config.js"></script>
12     <script>
13             System.import('app.js');
14     </script>
15 </body>
16 </html>

步驟六： 使用jspm-cli安裝開發包

在你項目根目錄下運行下面的jspm-cli命令：

jspm install react react-dom css npm:@telerik/kendo-react-buttons

上面的命令將在jspm_packagees目錄下安裝React，react-dom，jspm css插件和Kendo UI React按鈕。這些依賴關係將會放到package.json文件中。另外，jspm配置文件也將會對應更新，以便安裝須要的安裝包，並且不須要手動更新config.js文件。

更新後的jspm_packagees目錄結構看起來像下面這樣：

├── jspm_packages
│   ├── github
│   │   ├── jspm
│   │   └── systemjs
│   ├── npm
│   │   ├── @telerik
│   │   ├── Base64@0.2.1
│   │   ├── Base64@0.2.1.js
│   │   ├── asap@2.0.3
│   │   ├── asap@2.0.3.js
│   │   ├── assert@1.3.0
│   │   ├── assert@1.3.0.js
│   │   ├── babel-core@5.8.38
│   │   ├── babel-core@5.8.38.js
│   │   ├── babel-runtime@5.8.38
│   │   ├── base64-js@0.0.8
│   │   ├── base64-js@0.0.8.js
│   │   ├── browserify-zlib@0.1.4
│   │   ├── browserify-zlib@0.1.4.js
│   │   ├── buffer@3.6.0
│   │   ├── buffer@3.6.0.js
│   │   ├── classnames@2.2.5
│   │   ├── classnames@2.2.5.js
│   │   ├── core-js@1.2.6
│   │   ├── core-js@1.2.6.js
│   │   ├── core-util-is@1.0.2
│   │   ├── core-util-is@1.0.2.js
│   │   ├── domain-browser@1.1.7
│   │   ├── domain-browser@1.1.7.js
│   │   ├── encoding@0.1.12
│   │   ├── encoding@0.1.12.js
│   │   ├── events@1.0.2
│   │   ├── events@1.0.2.js
│   │   ├── fbjs@0.6.1
│   │   ├── fbjs@0.6.1.js
│   │   ├── fbjs@0.8.2
│   │   ├── fbjs@0.8.2.js
│   │   ├── https-browserify@0.0.0
│   │   ├── https-browserify@0.0.0.js
│   │   ├── iconv-lite@0.4.13
│   │   ├── iconv-lite@0.4.13.js
│   │   ├── ieee754@1.1.6
│   │   ├── ieee754@1.1.6.js
│   │   ├── inherits@2.0.1
│   │   ├── inherits@2.0.1.js
│   │   ├── is-stream@1.1.0
│   │   ├── is-stream@1.1.0.js
│   │   ├── isarray@0.0.1
│   │   ├── isarray@0.0.1.js
│   │   ├── isarray@1.0.0
│   │   ├── isarray@1.0.0.js
│   │   ├── isomorphic-fetch@2.2.1
│   │   ├── isomorphic-fetch@2.2.1.js
│   │   ├── js-tokens@1.0.3
│   │   ├── js-tokens@1.0.3.js
│   │   ├── loose-envify@1.2.0
│   │   ├── loose-envify@1.2.0.js
│   │   ├── node-fetch@1.5.2
│   │   ├── node-fetch@1.5.2.js
│   │   ├── object-assign@4.1.0
│   │   ├── object-assign@4.1.0.js
│   │   ├── pako@0.2.8
│   │   ├── pako@0.2.8.js
│   │   ├── path-browserify@0.0.0
│   │   ├── path-browserify@0.0.0.js
│   │   ├── process-nextick-args@1.0.7
│   │   ├── process-nextick-args@1.0.7.js
│   │   ├── process@0.11.3
│   │   ├── process@0.11.3.js
│   │   ├── promise@7.1.1
│   │   ├── promise@7.1.1.js
│   │   ├── punycode@1.3.2
│   │   ├── punycode@1.3.2.js
│   │   ├── querystring@0.2.0
│   │   ├── querystring@0.2.0.js
│   │   ├── react-dom@0.14.8
│   │   ├── react-dom@0.14.8.js
│   │   ├── react-dom@15.0.2
│   │   ├── react-dom@15.0.2.js
│   │   ├── react@0.14.8
│   │   ├── react@0.14.8.js
│   │   ├── react@15.0.2
│   │   ├── react@15.0.2.js
│   │   ├── readable-stream@1.1.14
│   │   ├── readable-stream@1.1.14.js
│   │   ├── readable-stream@2.1.2
│   │   ├── readable-stream@2.1.2.js
│   │   ├── stream-browserify@1.0.0
│   │   ├── stream-browserify@1.0.0.js
│   │   ├── string_decoder@0.10.31
│   │   ├── string_decoder@0.10.31.js
│   │   ├── ua-parser-js@0.7.10
│   │   ├── ua-parser-js@0.7.10.js
│   │   ├── url@0.10.3
│   │   ├── url@0.10.3.js
│   │   ├── util-deprecate@1.0.2
│   │   ├── util-deprecate@1.0.2.js
│   │   ├── util@0.10.3
│   │   ├── util@0.10.3.js
│   │   ├── whatwg-fetch@1.0.0
│   │   └── whatwg-fetch@1.0.0.js
│   ├── system-csp-production.js
│   ├── system-csp-production.js.map
│   ├── system-csp-production.src.js
│   ├── system-polyfills.js
│   ├── system-polyfills.js.map
│   ├── system-polyfills.src.js
│   ├── system.js
│   ├── system.js.map
│   └── system.src.js

 

步驟七： 更新package.json

打開package.json文件，代碼看起來像下面這樣：

{
  "devDependencies": {
    "browser-sync": "^2.12.8",
    "jspm": "^0.16.35"
  },
  "jspm": {
    "dependencies": {
      "@telerik/kendo-react-buttons": "npm:@telerik/kendo-react-buttons@^0.1.0",
      "css": "github:systemjs/plugin-css@^0.1.22",
      "react": "npm:react@^15.1.0",
      "react-dom": "npm:react-dom@^15.1.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  }
}

在package.json文件中添加scripts相關配置：

{
    "scripts": {
        "bundle": "jspm bundle app.js --inject",
        "unBundle": "jspm unbundle",
        "server": "browser-sync --port 4000 --no-inject-changes start --server --files \"**/*.html\" \"style/**/*.css\" \"js/**/*.js\" "
    },
    "devDependencies": {
        "browser-sync": "^2.12.8",
        "jspm": "^0.16.35"
    },
    "jspm": {
        "dependencies": {
            "@telerik/kendo-react-buttons": "npm:@telerik/kendo-react-buttons@^0.1.0",
            "css": "github:systemjs/plugin-css@^0.1.22",
            "react": "npm:react@^15.1.0",
            "react-dom": "npm:react-dom@^15.1.0"
        },
        "devDependencies": {
            "babel": "npm:babel-core@^5.8.24",
            "babel-runtime": "npm:babel-runtime@^5.8.24",
            "core-js": "npm:core-js@^1.1.4"
        }
    }
}

 

步驟八：運行服務器

在你項目根目錄下運行下面的jspm-cli命令：

npm run server

若是你遵循全部的步驟操做，而且沒有出錯的話，那麼Browsersync應該會打開瀏覽器在http://localhost:4000地址將加載index.html和app.js文件。並且所作的任何修改Browsersync將會自動刷新瀏覽器。

步驟九：捆綁模式

SystemJS/jspm提供了一個捆綁模式。打開一個新的命令窗口，而且在項目根目錄下運行下面的npm命令：

npm run bundle

若是要解除捆綁模式，能夠執行下面的命令：

npm run unBundle

開始使用React

但願上面這七種有關於React的開發配置對你學習React有所幫助。一切學習都是從最基本的開始，掌握了基礎配置以後，就能夠在這個配置環境上使用React，而後學習有關於React更復雜的技能。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程