我在这里从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React应用程序,我想在基于Apache的服务器上运行这个测试代码,我知道我需要创建一个可分发的构建,但我不知道如何做到这一点,也找不到明确的说明.

我看过这篇React,js on Apache server篇博文,但它只有几条指导原则

推荐答案

最终,我终于找到了答案,我只是希望它能帮助像我这样的人

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

然后是json文件包

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

请注意脚本部分和生产部分,生产部分给出了最终的可部署索引.js文件(名称可以是任何内容)

其余部分取决于您的代码和组件

执行以下命令序列

npm安装

这会让你获得所有的依赖( node 模块)

然后

npm运行生产

这将得到最终的index.js个文件,其中将包含所有Bundle 的代码

完成后,将index.htmlindex.js个文件放在www/html或web应用程序根目录下,仅此而已.

Reactjs相关问答推荐

react应用程序中的字体不适用于.scss扩展名

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

如何使图像zoom 并移动到点击点

在Reaction中管理多个状态

无法使用react-hook-form和react-places-autocomplete在字段中输入值

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

无法使用 MongoDB Atlas 和 Next.js 删除正确的帖子

如何在next.js 13中仅在主页导航栏上隐藏组件?

BrowserRouter改变了URL但没有链接到页面

react - 警告:列表中的每个子元素都应该有一个独特的 keys props ,即使我已经设置了 keys

@react-three/postprocessing 没有匹配的从 three.module.js 导出以导入WebGLMultisampleRenderTarget

Reactjs 表单未反映提交时的更改

如何检索包含动态段的未解析路径?

使用 react-router-dom 时弹出空白页面

调用 Jest 和服务方法的问题

如何使用 babel 将 SVG 转换为 React 组件?

为什么我在运行一些 npm react 命令时会收到这些警告?

如何用实际的br标签替换axios响应中的br标签?

如何将本地视频文件上传到 Google Cloud

Rtk 查询无效标签不使数据无效