webpack+react+nodejs+express前端开发环境搭建

最新推荐文章于 2023-11-15 15:17:07 发布

weixin_30254435

最新推荐文章于 2023-11-15 15:17:07 发布

阅读量237

点赞数

文章标签： webpack 前端 json ViewUI

原文链接：http://www.cnblogs.com/lcosima/p/7441031.html

版权

React+Webpack+Nodejs+Express快速构建项目

2017-04-13 14:03 314人阅读评论(0) 收藏举报

目录(?)[+]

目前 `Webpack` 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识统统学习一下，开启一段新的前端开发之路呢？本文将以一个例子来讲解如何使用 `Webpack` 、`Express` 这些技术快速构建项目，为后期的深入学习铺好道路，接下来我们就一起动手体验一下吧！

1.1 安装Node.js与NPM

Node.js 还是比较方便的，请自行下载并安装，安装包及源码下载地址为： https://nodejs.org/en/download/ 。安装过程基本就一直‘NEXT’就可以。安装完成后，记得到环境变量里配置了 Node.js ，变量值就是你的安装路径，例如“ C:Program Filesnodejs ”。

NPM 是随同 Node.js 已经集成了 npm 也一并安装好了。这里就不详细说了，如有问题可自行百度一下。

首先，进到你的工作目录里新建一个项目并打开

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

npm init 命令为你的项目创建一个 package.json 文件。

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 命令：

webpack

webpack.config.js 文件，按照配置进行打包。命令执行成功后，控制台会显示打包结果，如下图：

webpack 命令不带参数的话，每次修改文件都要重新手动执行一下这个命令，会很麻烦，由此，我们可以在该命令后加一个 - watch 参数，这样我们每次改完文件都会自动编译，无需再手动执行一次了。

webpack --watch

`http://facebook.github.io/react/ 下载最新版，然后在主页 react.min.js （React的核心库）、 browser.min.js （用于将 JSX 语法转为 JavaScript 语法）这三个库就可以。`

npm 安装 React ，执行以下命令来完成安装。

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

babel 插件：

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 项目名

转载于:https://www.cnblogs.com/lcosima/p/7441031.html

weixin_30254435

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack+react+nodejs+express前端开发环境搭建

React+Webpack+Nodejs+Express快速构建项目 2017-04-13 14:03 314人阅读评论(0) 收藏举报目录(?)[+]目前Webpack等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识统统学习一下，开启一段新的前端开发之路呢？本文将以一个例子来讲解如何使用Webpack、Express这些技术快速构建项目，...
复制链接

扫一扫

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 安装。

环境搭建好后，就可以开始我们的代码作业了。

目录“React-Nodejs-Learnclientview”下的 index.html 中引入 webpack 打包后的 js 文件。

进到“React-Nodejs-Learnserver”目录下，后端代码都写在该目录下。新建一个“data”文件夹并打开，编写模拟数据代码。（D:my-workReact-Nodejs-LearnserverdatagetMessage.js）