Question

我有一个reactjs应用-在开发环境中运行良好。我的意思是，当我使用

npm start

它在localhost：8080中运行，没有任何问题。

当我尝试使用以下命令执行相同操作时，为AWS S3中的某个位置生成用于静态托管的分发文件夹。这就是问题所在。

npm run build

下面是我执行上述命令时的输出文件夹结构：

dist

bundle.js
bundle.js.map

公开

index.html

我已经阅读了这些帖子（关于与我的bundle.js文件sizes和此link相关的警告），并确实按照建议进行了修改，但是我没有得到预期的结果。

下面是我的package.json供参考：

{
  "name": "react-starter",
  "version": "1.1.5",
  "description": "example",
  "main": "dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config ./webpack.dev.js",
    "build": "webpack --max_old_space_size=4096 --config ./webpack.prod.js --progress --profile --colors"
  },
  "homepage": ".",
  "keywords": [
    "react"
  ],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^3.2.0",
    "dotenv": "^6.2.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "stylelint": "^9.10.1",
    "stylelint-config-standard": "^18.3.0",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "i18next": "^16.0.0",
    "i18next-browser-languagedetector": "^3.0.1",
    "konva": "^2.5.1",
    "normalizr": "^3.4.0",
    "prop-types": "^15.7.2",
    "react-hot-loader": "^4.11.1",
    "react-i18next": "^10.11.1",
    "react-icons": "^3.7.0",
    "react-konva": "^16.8.6",
    "react-player": "^1.11.1",
    "react-scroll": "^1.7.12",
    "reactstrap": "^6.5.0"
  },
  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

webpack.prod.js如下：

const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    entry: 'apps/index.js',
    mode: 'production',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'bundle.js',
        libraryTarget: 'commonjs2',
    },
    plugins: [
        new CleanWebpackPlugin(['dist/*.*']),
    ],
    externals: {
        react: 'react',
        'react-dom': 'react-dom',
    },
});

我还注意到了我尝试与之集成的库中的一些不推荐使用的东西。我已经安装了缺少的对等项依赖项。我已经报告了库here的问题。我相信将其上传到S3，我们应该在dist或public文件夹中拥有所有必需的文件以及index.html，这些文件将作为前缀从应用程序获取入口的S3中添加。

任何对此的帮助将不胜感激。另外，我将随时提供其他信息。

Answer 1

查看您的package.json文件，似乎您没有使用create-react-app。

我建议使用它简单地创建一个新的React.js应用程序，然后将应用程序的内容复制到新创建的应用程序中。这很容易而且有效。

希望这会有所帮助。

Answer 2

仅使工作正常是不够的。您应该阅读一个简单的指南，逐步设置诸如此类的内容

并尝试一些简单的样板项目，然后再处理像这样的复杂项目

是的，按照@Daniele Ricci和的建议，从create-react-app开始也是很好的。您可以使用react-scripts eject来了解幕后发生的事情。

Reactjs-/ dist文件夹只有2个文件-bundle.js和bundle.js.map-不包含任何其他文件

2 个答案: