從頭開始構(gòu)建一個自己的react項目

原文鏈接：https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
本文對原文進行了粗略的翻譯~~旨在幫助剛?cè)腴T的新手迅速了解構(gòu)建一個基于webpack打包的react項目。

Project setup 配置項目

1.首先使用下面的命令來創(chuàng)建一個項目：

mkdir minimal-react-boilerplate 
cd minimal-react-boilerplate 
npm init -y

npm init 會生成一個package.json文件，-y命令則是所有的選項都用默認選項.

2.創(chuàng)建一個分布式（？）文件夾，該文件夾用來為單頁應(yīng)用（SPA）服務(wù)，使得應(yīng)用可以在瀏覽器環(huán)境或者外部服務(wù)器被訪問到。該文件夾會包括兩個文件：一個html和一個js，js會由webpack配置好的js資源來自動生成，你可以手動創(chuàng)建一個html文件作為應(yīng)用的入口。

注釋：這個html和js就是你程序發(fā)布的所有內(nèi)容了。

html的內(nèi)容如下所示：

<!DOCTYPE html>
<html>
  <head>
      <title>The Minimal React Webpack Babel Setup</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

說明兩點：

  • bundle.js會被webpack生成，

  • id=“app”會作為react根節(jié)點來找到入口的標識。

接下來要做的就是把所有的資源文件打包成一個bundle.js，創(chuàng)建一個根組件將id=“app”作為文件的入口

Webpack Setup 配置webpack

使用webpack來打包，為了能在localhost環(huán)境訪問到，并在瀏覽器里開發(fā)，需要同時安裝webpack-dev-server，才能啟動服務(wù)器。

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

現(xiàn)在你應(yīng)該有node_modules文件夾，這里你可以看到你安裝的第三方依賴，因為使用了--save-dev，這些依賴會被寫在package.json文件中。

接下來在package.json中配置webpack-dev-server的運行

"scripts":{

    "start":"webpack-dev-server --progress --colors --hot --config ./webpack.config.js",

     ...

},

這個運行腳本定義了你需要使用一些基本的配置來使用webpack-dev-server,需要創(chuàng)建配置文件webpack.config.js

module.exports = {
    entry: ['./src/index.js'],
    output: { 
      path:__dirname + '/dist', 
      publicPath: '/',
      filename: 'bundle.js'
    },
   devServer: {
      contentBase: './dist'
   }
};

簡單的說這個配置文件做了三件事：

  • 1.我們使用src/index.js來做為打包的入口文件

  • 2.打包后的文件是bundle.js

  • 3.bundle.js生成在dist文件夾下，dist文件夾被用來啟動我們的app

我們的項目里還少了一個src/index.js文件，因為它是我們的entry文件么~remember
在src/index.js中輸入
The Minimal React Webpack Babel Setup
現(xiàn)在你的項目結(jié)構(gòu)是這樣的

- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js

接下來就可以運行你的webpack-dev-server了，

通過當前目錄下（你項目所在的目錄）啟動命令行 ，運行項目
npm start

image.png

就可以看到項目已經(jīng)運行成功了，這時候在瀏覽器中鍵入你的localhost地址，如圖中，我的運行端口是8081；(一般情況是8080，當被占用時會往后增加)
http://localhost:8081
就可以在瀏覽器的控制臺console.log()中看到你寫入的文字了~
現(xiàn)在你通過webpack來運行了你的項目，把你的入口文件src/index.js打包成了bundle.js，然后將它引入到了dist/index.html，最后你就可以在console.log中看到你想要的結(jié)果了。
雖然目前只有src/index.js被打包了，但是你肯定會在index.js中引入更多的js，這些都會被webpack自動打包到bundle.js中。贊不贊？

Hot Reloading 熱加載

react-hot-loader是非常值得推薦給你的，它會大大縮短你開發(fā)到看到效果的時間，簡單的說，熱加載的作用就是當你修改了一部分源代碼，這個變化會立刻表現(xiàn)在瀏覽器上，而無需通過你刷新整個頁面。
在根目錄安裝
npm install --save-dev react-hot-loader
提示：在命令行，按control+c可以取消npm start的運行，然后安裝完成后需要再次運行npm start
想要熱加載生效，我們還需要在webpack.config.js這個配置文件增加一些配置。

module.exports = {
  entry: [
     'webpack-dev-server?http://localhost:8081', // 你的應(yīng)該是8080
    'webpack/hot/only-dev-server',
    './src/index.js',
  ], 
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
}

同時在src/index.js文件里還需定義熱加載是可以使用的并且需要被使用。
src/index.js文件的內(nèi)容：

console.log('My Minimal React Webpack Babel Setup');
module.hot.accept();

重新跑一下npm start，webpack的配置文件修改了是需要重新啟動的。
運行后你又可以在瀏覽器的控制臺里看到console.log()的內(nèi)容了，同時還能看到一些與熱加載有關(guān)的打印，不用去看它們。先來試試我們的熱加載好了沒，當你修改你的console.log()內(nèi)容后，保存，看看瀏覽器是不是自己更新了，恭喜~~
到這里webpack的基本配置已經(jīng)好了，但是還少了一個重要的模塊——Babel

Babel Setup 配置babel

Babel可以使你盡情的使用es6的語法，使用Babel你的代碼會被編譯成es5，這樣的話所有的瀏覽器，可能只支持部分的es6，也可以支持你的代碼。Babel甚至還允許你使用比es6還先進的語法下一代eses7
打開命令行，讓我們趕緊使用吧
npm install --save-dev babel-core babel-loader babel-preset-es2015
此外你可能還想使用一些在試驗階段的es6特性（比如對象擴展符{...}），這些可以通過stages來激活。不用擔心它的穩(wěn)定性，因為已經(jīng)被Facebook用來在create-react-app中使用了。
怎么使用stages?
npm install --save-dev babel-preset-stage-2
最后一步，鑒于你是要用react的，你需要多一些配置來把react的jsx文件轉(zhuǎn)換成js文件，這是為了方便。
npm install --save-dev babel-preset-react
現(xiàn)在所有的node包都已經(jīng)安裝到位，你接下來還需修改一下package.json和webpack.config.js文件，這些變化包括你所有安裝的包。
package.json中

...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
},
"devDependencies": {
...

webpack.config.js中

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot-loader!babel-loader'
    }]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

對module模塊中的loaders是個數(shù)組，表示不同的加載器，test是要匹配的文件后綴為.jsx，exclude是把node_modules排除在外。具體內(nèi)容本篇文件并未詳述。

在此時運行npm start 將會報錯，因為你的應(yīng)用還不識別react。
因為我們馬上就要進行第一個react組件的開發(fā)了，讓我們來修復(fù)下~

React Setup 使用React

為了使用react，你還需要安裝兩個node包，react和react-dom，這兩個安裝完后npm start 也不會報錯了
npm install --save react react-dom
然后在src/index.js中編寫你的鏈接react的第一個組件吧
src/index.js中

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

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
);

module.hot.accept();

到今天，不得不說這篇文章已經(jīng)過時了，因為react和各種node包的版本更新速度太快，這個項目已經(jīng)跑不起來，如果非要跑起來，可以安裝歷史版本

npm install react-hot-loader@1.3.1 --save-dev
npm install react@15.3.0 --save-dev
npm install react-dom@15.0.2 --save-dev

所以從今天開始還是要多寫博客，多總結(jié)，以后再回頭看，自己應(yīng)該有了長足的進步吧，以前寫的文章該有多~~
到這里，打開瀏覽器應(yīng)該就可以看到頁面上輸出了內(nèi)容，而不是再在控制臺上了
至此，一個迷你型的react項目就搭建完成了。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容