如何将 create-react-app 脚本转换为静态包

Question

抱歉，如果这是一个 strange/stupid 问题，但我一直在尝试从 PHP 过渡到更多 JavaScript 导向的开发。

我已经使用 create-react-app 构建了一个没有路由的小型单页应用程序，它完全按照我想要的方式工作，但我现在想将它部署在 inside 我的现有 PHP 个应用程序。

该应用确实进行了一些 API 调用，因此它不能简单地转换为静态页面。

有什么方法可以将我目前拥有的内容转换成无需服务器即可轻松加载的 .js 文件吗？

谢谢

Answer 1

只需执行 npm run build，然后将 ./build 文件夹上传到您的服务器。

Answer 2

你可以用 webpack devServer

举个例子：

package.json

{
   "name": "sampleApp",
   "version": "1.0.0",
   "description": "",
   "devDependencies": {
      "webpack": "4.15.0",
      "webpack-cli": "3.0.8",
      "webpack-dev-server": "3.1.4"
   },

   "scripts": {
        "dev": "webpack --mode development && webpack-dev-server --mode development",
        "build": "webpack --mode production && webpack-dev-server --mode production"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sample/sample.git"
   }
}

webpack.config.js

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'bundle.js',
   },
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: '/build/',
    host: '127.0.0.1',
    port: 9998,
    open: true
  },
  resolve: {
    extensions: ['.ts', '.js'],

  }
};

如何将 create-react-app 脚本转换为静态包

How to convert create-react-app script into a static bundle

npm

reactjs

create-react-app