webpack+react+nodejs+express前端開發環境搭建

時間 2020-06-29

標籤 webpack+react+nodejs+express webpack react nodejs express 前端開發環境搭建欄目 React 简体版

原文原文鏈接

React+Webpack+Nodejs+Express快速構建項目

2017-04-13 14:03 314人閱讀評論(0) 收藏舉報

目錄(?)[+]javascript

目前 `Webpack` 等技術如火如荼，你是否是還在愁苦如何把這些雜亂的知識通通學習一下，開啓一段新的前端開發之路呢？本文將以一個例子來說解如何使用 `Webpack` 、`Express` 這些技術快速構建項目，爲後期的深刻學習鋪好道路，接下來咱們就一塊兒動手體驗一下吧！

1.1 安裝Node.js與NPM

Node.js 仍是比較方便的，請自行下載並安裝，安裝包及源碼下載地址爲： https://nodejs.org/en/download/ 。安裝過程基本就一直‘NEXT’就能夠。安裝完成後，記獲得環境變量裏配置了 Node.js ，變量值就是你的安裝路徑，例如「 C:Program Filesnodejs 」。php

NPM 是隨同 Node.js 已經集成了 npm 也一併安裝好了。這裏就不詳細說了，若有問題可自行百度一下。css

首先，進到你的工做目錄裏新建一個項目並打開

D:\my-work>mkdir React-Nodejs-learn && cd React-Nodejs-learn

npm init 命令爲你的項目建立一個 package.json 文件。html

D:\my-work\React-Nodejs-learn>npm init

entry point: ，它的值爲項目的入口文件，你能夠設置成你想要的名稱，例如 index.js 等，在這兒我就默認選擇了 app.js 。前端

`Webpack` 是當下較熱門的前端資源模塊化管理和打包工具，它不只能夠將鬆散的模塊按照規則打包成前端資源，還能夠實現模塊的按需加載。任何形式的資源均可以被視爲模塊，如 CommonJs模塊、AMD模塊、ES6模塊、CSS、圖片、JSON、Coffeescript、SASS等。對應各類不一樣文件類型的資源， `loader` 。

使用 `-g` 參數），也能夠選擇只在項目中安裝。同時，若是還指定了 `package.json` 文件中的 `npm install` 命令便可自動安裝依賴列表中所列出的全部模塊。執行如下命令安裝 `Webpack` 。

npm install webpack --save -g

本項目中目前使用到的有 `css-loader` 、 `jsx-loader`。以後若有須要能夠再按需安裝其餘 `loader` 。

npm install babel-loader css-loader style-loader jsx-loader --save

每一個項目下都必須配置有一個 `Webpack` 要作什麼。進到「React-Nodejs-Learnclientstatic」目錄下新建一個 `webpack.config.js` 配置文件，能夠參考以下內容：

var webpack = require('webpack'); module.exports = { // 頁面入口文件配置 entry : { 'view/main/index': './js/view/main/index.js' }, // 入口文件輸出配置 output : { path : __dirname + '/output/js/', filename : '[name].bundle.js' }, module: { // 加載器配置 loaders: [ { test: /\.js$/, loader: 'babel-loader!jsx-loader?harmony' }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, // 其餘解決方案配置 resolve: { extensions: ['', '.js', '.jsx', '.css', '.json'], }, // 插件項 plugins : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, output: { comments: false, }, }), ] }

webpack.config.js 文件所在目錄下，執行 webpack 命令：java

webpack

webpack.config.js 文件，按照配置進行打包。命令執行成功後，控制檯會顯示打包結果，以下圖：node

webpack 命令不帶參數的話，每次修改文件都要從新手動執行一下這個命令，會很麻煩，由此，咱們能夠在該命令後加一個 - watch 參數，這樣咱們每次改完文件都會自動編譯，無需再手動執行一次了。react

webpack --watch

`http://facebook.github.io/react/ 下載最新版，而後在主頁 react.min.js （React的核心庫）、 browser.min.js （用於將 JSX 語法轉爲 JavaScript 語法）這三個庫就能夠。`

npm 安裝 React ，執行如下命令來完成安裝。webpack

npm install react --save npm install react-dom --save

babel 插件：nginx

npm install babel-core --save npm install babel-preset-react --save npm install babel-preset-es2015 --save

`node.js` Web應用框架, 提供一系列強大特性幫助你建立各類Web應用。全局安裝 `Express` 並將其保存到依賴列表中：

npm install express --save -g

`Node.js` 的模板引擎，一樣使用 `npm` 安裝。

npm install ejs --save -g

環境搭建好後，就能夠開始咱們的代碼做業了。

目錄「React-Nodejs-Learnclientview」下的 `index.html` 中引入 `webpack` 打包後的 `js` 文件。

<!DOCTYPE HTML>
<html> <head> <meta charset="utf-8"/> <title>React-Nodejs-Learn</title> <link rel="stylesheet" href="../client/static/css/style.css" type="text/css"/> </head> <body> <div id="main-container"></div> <script src="../client/static/output/js/view/main/index.bundle.js"></script> </body> </html>

// 引入模塊 var express = require('express'); var path = require('path'); var ejs = require('ejs'); var app = express(); // 對全部(/)URL或路由返回index.html app.get('/', function (req, res) { res.render('index'); }); // 設置views路徑和模板 app.set('views', './client/view'); app.set('view engine', 'html'); app.engine('html', ejs.renderFile); // 靜態文件配置 app.use('/client/static', express.static(path.join(__dirname, 'client/static'))); // 啓動一個服務，監遵從8888端口進入的全部鏈接請求 var server = app.listen(8888, function(){ var host = server.address().address; var port = server.address().port; console.log('Listening at http://%s:%s', host, port); });

app.js ：

node app.js

http://localhost:8888/ 並查看輸出結果，結果以下圖所示。

node 命令也是隻能執行一次，每次修改文件都要再從新手動執行一下這個命令，會很麻煩。咱們能夠經過 nodemon ：

npm install nodemon --save

這樣每次修改代碼後，無需手動從新啓動 app.js 。

`進到「React-Nodejs-Learnserver」目錄下，後端代碼都寫在該目錄下。新建一個「data」文件夾並打開，編寫模擬數據代碼。（D:my-workReact-Nodejs-LearnserverdatagetMessage.js）`

var MessageList = [

{ "Message":"Hello React"}, { "Message":"Hello Webpack"}, { "Message":"Hello Nodejs"}, { "Message":"Hello Express"} ]; exports.getMessageList = function (callback) { callback(MessageList); };

數據庫，這一起有機會再分享給你們。

進到「React-Nodejs-Learnserver」目錄下，新建一個「actiondata」文件夾並打開，編寫對應的取數據的代碼。（D:my-workReact-Nodejs-LearnserveractiondatagetMessage.js）

var getMessageList = require('../../data/getMessage'); exports.execute = function (req, res) { getMessageList.getMessageList(function (data) { res.send(data); }); };

修改 // 引入模塊 var express = require('express'); var path = require('path'); var ejs = require('ejs'); var app = express(); // 新增接口路由 app.get('/data/:module', function (req, res, next) { var c_path = req.params.module; var Action = require('./server/action/data/' + c_path); Action.execute(req, res); }); // 對全部(/)URL或路由返回index.html app.get('/', function (req, res) { res.render('index'); }); // 設置views路徑和模板 app.set('views', './client/view'); app.set('view engine', 'html'); app.engine('html', ejs.renderFile); // app.use配置 app.use('/client/static', express.static(path.join(__dirname, 'client/static'))); // 啓動一個服務，監遵從8888端口進入的全部鏈接請求 var server = app.listen(8888, function(){ var host = server.address().address; var port = server.address().port; console.log('Listening at http://%s:%s', host, port); });

http://localhost:8888/data/getMessage/ ，能夠看到數據正確的返回。

首先進到目錄「React-Nodejs-Learnclientstaticjsstoremain」下，新建一個 `index.js` 文件。該文件用於組件與後端數據的交互。

var EventEmitter = require('events').EventEmitter; class Store_MessageList extends EventEmitter { constructor() { this.allData = null; } getAllData(callback) { var self = this; fetch( "/data/getMessage/" ) .then(function(res) { if (res.ok) { res.json().then(function(data) { self.allData = data; callback(self.allData); }); } else { console.log("Looks like the response wasn't perfect, got status", res.status); } }, function(e) { console.log("Fetch failed!", e); }); } } module.exports = new Store_MessageList();

index.js 。編寫視圖組件並渲染到頁面上。

var React = require('react'); var ReactDOM = require('react-dom'); var store = require('../../store/main'); class MessageList extends React.Component { constructor(props) { super(props); this.state = { messageList: [] }; this.getData(); } render() { var self = this; var messages = this.state.messageList; var arr = []; messages .forEach(function(em) { arr.push(<li key={em}> {em} </li>); }); return <section className="pageContentInner"> <div className="head-section"><h1>MessageList: </h1></div> <ul> {arr} </ul> </section>; } getData() { var self = this; store .getAllData(function (data) { var i = 0; var len = data.length; var messageListArr = []; for(; i<len; i++) { messageListArr[i] = data[i].Message; } self.setState({messageList: messageListArr}); console.log(self.state.messageList); }) } } ReactDOM.render( <MessageList />, document.getElementById('main-container') );

至此，一個項目就快速構建好了，這樣咱們就能夠繼續後續開發工做了。固然，項目開始時，其實咱們能夠直接使用 `express -t ejs project` 建立項目，此時，會自動生成一個 `model` 、 `routes`和 `app.js` 和 `package.json` 兩個文件。再也不須要咱們手動建立目錄。

經過腳手架命令建立react項目

第一步：npm install -g create-react-app

第二步：create-react-app xx

第三步：運行npm run eject顯示配置文件等全量文件夾

腳手架yeoman使用教程

第一步安裝：npm install -g generator-webpackk

第二步建立項目：yo react-webpack 項目名

相關標籤/搜索

每日一句

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

webpack+react+nodejs+express前端開發環境搭建

React+Webpack+Nodejs+Express快速構建項目

1.1 安裝Node.js與NPM

首先，進到你的工做目錄裏新建一個項目並打開

使用 -g 參數），也能夠選擇只在項目中安裝。同時，若是還指定了 package.json 文件中的 npm install 命令便可自動安裝依賴列表中所列出的全部模塊。執行如下命令安裝 Webpack 。

本項目中目前使用到的有 css-loader 、 jsx-loader。以後若有須要能夠再按需安裝其餘 loader 。

每一個項目下都必須配置有一個 Webpack 要作什麼。進到「React-Nodejs-Learnclientstatic」目錄下新建一個 webpack.config.js 配置文件，能夠參考以下內容：

http://facebook.github.io/react/ 下載最新版，而後在主頁 react.min.js （React的核心庫） 、 browser.min.js （用於將 JSX 語法轉爲 JavaScript 語法）這三個庫就能夠。

node.js Web應用框架, 提供一系列強大特性幫助你建立各類Web應用。全局安裝 Express 並將其保存到依賴列表中：

Node.js 的模板引擎，一樣使用 npm 安裝。