React + Redux 基本框架的搭建以及Demo
前期準備：
Node.js version: v10.14.2
步驟：
1：建立一個空的資料夾，打卡cmd 視窗， 在當前資料夾目錄下，執行 npm init, 在資料夾中會生成一個packadge.json 的檔案
2：安裝專案依賴項， 包括專案打包工具webpack, babel 編譯工具相關包和react 相關的包，依次執行以下命令
npm install webpack webpack-cli webpack-dev-middleware webpack-hot-middleware webpack-node-externals babel-loader babel-plugin-transform-export-extensions @babel/preset-env @babel/preset-react --save-dev
npm install ejs express react react-dom react-helmet redux react-redux
安裝完成後，packadge.json 中出現：
1： 新建專案檔案 webpack.config.js webpack.dev.config.js webpack.prod.config.js 和專案入口檔案 index.js index.html
2： 配置webpack.config.js
配置js 的檔案入口， entry 表示webpack 會從這個檔案開始根據檔案的依賴打包
entry:{ index:'./index.js' }, 配置output, 將webpack打包的js放入output的路徑之中 output:{ path: path.resolve(__dirname,'./dist'),//這個路徑額結果 _dirname/dist _dirname是專案的根目錄，一般是packdge.json所在的目錄 publicPath: '/', filename: '[name].js', chunkFilename: '[name].js' }, 配置js 載入器，js 打包時要使用babel進行解釋 module:{ rules:[ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] } 配置檔案熱載入，在js和html 檔案更新時，本地自動更新 在外掛中加入web-html-plugin new HtmlWebpackPlugin({ filename: 'index.html',//在dist檔案中生成檔名為index.html檔案 template: './index.ejs',//以index.ejs 為模板生成檔案 chunks:['index'],// 打包的模組的名字為index, 如果是多檔案入口，可以根據模組名來將對應的js插入對應的檔案中 inject: true }), 在外掛中加入webpack-dev-middleware webpack-hot-middleware new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() 以上是全部webpack.config.js中的內容 在webpack.dev.config.js檔案中加入 var webpack = require('webpack'); var config =require("./webpack.config"); var hotMiddleWareClientPath='./dev-client'; //熱載入的檔案 Object.keys(config.entry).forEach(function (name, i) { //在入口檔案中開頭加入./dev-client 路徑 var extras = [hotMiddleWareClientPath] config.entry[name] = extras.concat(config.entry[name]) }) 在根目錄下新建dev-client 檔案 加入以下內容 var hotClient = require('webpack-hot-middleware/client')// 訂閱事件，當 event.action === 'reload' 時執行頁面重新整理 hotClient.subscribe(function (event) { if (event.action === 'reload') { window.location.reload() } }) 4 使用express搭建本地server, 程式碼如下： const express = require('express'); const webpack = require('webpack');
const app = express();
//in dev env, we need dev/hot middleware if (process.env.NODE_ENV === 'development') { const webpackDevMiddleware = require('webpack-dev-middleware'); //const config = require('../config/webpack.config.prod.js'); const config = require('../webpack.dev.config.js'); const compiler = webpack(config);
var hotMiddleware = require('webpack-hot-middleware')(compiler) // Tell express to use the webpack-dev-middleware and use the webpack.config.js // configuration file as a base. app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath }));
app.use(hotMiddleware);
// webpack外掛，監聽html檔案改變事件 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // 釋出事件 hotMiddleware.publish({ action: 'reload' }) cb() }) }) }
// Serve the files on port 8800. app.listen(8800, function () { console.log('Example app listening on port 8800!\n'); });
//router test app.get('/flowdirector',async (req, res, next)=>{ console.log("get test"); }); 此專案 github地址 ： https://github.com/PerficientCecelia/ReactDemo