关于reactjs：使用create-react-app时使用自定义生成输出文件夹


Use custom build output folder when using create-react-app

Facebook提供了create-react-app命令来构建React应用。 运行npm run build时，在/build文件夹中看到输出。

npm run build

Builds the app for production to the build folder. It correctly
bundles React in production mode and optimizes the build for the best
performance.

The build is minified and the filenames include the hashes. Your app
is ready to be deployed!

我们如何使用自定义文件夹而不是/build作为输出？ 谢谢。

相关讨论

编辑您的package.json：

1
"build":"react-scripts build && mv build webapp"

相关讨论

Create-react-app版本2+答案

对于create-react-app的最新(> v2)版本(以及可能更旧的版本)，将以下行添加到package.json中，然后重新构建。

1
"homepage":"./"

现在，您应该看到build / index.html将具有相对链接./static/...，而不是指向服务器根目录/static/...的链接。

相关讨论

您无法使用当前配置选项更改生成输出文件夹的名称。

而且，你不应该。这是create-react-app背后哲学的一部分：他们说约定优于配置。

如果您确实需要重命名文件夹，我会看到两个选择：

  • 在构建过程完成后，立即编写一条命令，将构建文件夹的内容复制到所需的另一个文件夹。例如，您可以尝试copyfiles npm软件包或任何类似的软件包。

  • 您可以尝试弹出create-react-app并调整配置。

    If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

    Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

    但是，必须注意这是单向操作。弹出后，您将无法返回！您放弃所有将来的更新。

    • 因此，如果可能的话，我建议您不要使用自定义文件夹命名。尝试使用默认命名。如果没有选择，请尝试＃1。如果仍然无法满足您的特定用例，并且您真的选择不了，请探索＃2。祝好运！

    相关讨论

    Félix的答案是正确的，并得到了Dan Abramov自己的支持。

    但是对于那些想要更改输出本身结构的用户(在build文件夹中)，可以在postbuild的帮助下运行构建后命令，该命令将在build脚本中自动运行。 package.json文件。

    下面的示例将其从static/更改为user/static/，移动文件并更新相关文件上的文件引用(此处为要点)：

    package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
     "name":"your-project",
     "version":"0.0.1",
      [...]
     "scripts": {
       "build":"react-scripts build",
       "postbuild":"./postbuild.sh",
        [...]
      },
    }

    postbuild.sh

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    #!/bin/bash

    # The purpose of this script is to do things with files generated by
    # 'create-react-app' after 'build' is run.
    # 1. Move files to a new directory called 'user'
    #    The resulting structure is 'build/user/static/<etc>'
    # 2. Update reference on generated files from
    #    static/<etc>
    #     to
    #    user/static/<etc>
    #
    # More details on: https://github.com/facebook/create-react-app/issues/3824

    # Browse into './build/' directory
    cd build
    # Create './user/' directory
    echo '1/4 Create"user" directory'
    mkdir user
    # Find all files, excluding (through 'grep'):
    # - '.',
    # - the newly created directory './user/'
    # - all content for the directory'./static/'
    # Move all matches to the directory './user/'
    echo '2/4 Move relevant files'
    find . | grep -Ev '^.$|^.\\/user$|^.\\/static\\/.+' | xargs -I{} mv -v {} user
    # Browse into './user/' directory
    cd user
    # Find all files within the folder (not subfolders)
    # Replace string 'static/' with 'user/static/' on all files that match the 'find'
    # ('sed' requires one to create backup files on OSX, so we do that)
    echo '3/4 Replace file references'
    find . -type f -maxdepth 1 | LC_ALL=C xargs -I{} sed -i.backup -e 's,static/,user/static/,g' {}
    # Delete '*.backup' files created in the last process
    echo '4/4 Clean up'
    find . -name '*.backup' -type f -delete
    # Done
    相关讨论

    我有想要重命名文件夹并更改生成输出位置的场景，并在package.json中的以下代码中使用了最新版本

    1
    "build":"react-scripts build && mv build ../my_bundles"
    相关讨论

    根据Ben Carp和WallaceSidhrée的回答：

    这就是将整个构建文件夹复制到wamp公用文件夹的方法。

    package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
     "name":"[your project name]",
     "homepage":"http://localhost/[your project name]/",
     "version":"0.0.1",
      [...]
     "scripts": {
       "build":"react-scripts build",
       "postbuild":"@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./post_build.ps1",
        [...]
      },
    }

    post_build.ps1

    1
    Copy-Item"./build/*" -Destination"C:/wamp64/www/[your project name]" -Recurse -force

    仅当您要部署到服务器上的子文件夹时，才需要主页行(请参阅另一个问题的答案)。

    快速兼容性构建脚本(也适用于Windows)：

    1
    "build":"react-scripts build && rm -rf docs && mv build docs"
    Windows Powershell脚本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //package.json
    "scripts": {
       "postbuildNamingScript":"@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./powerShellPostBuildScript.ps1",


    // powerShellPostBuildScript.ps1
    move build/static/js build/new-folder-name
    (Get-Content build/index.html).replace('static/js', 'new-folder-name') | Set-Content
    build/index.html
    "Finished Running BuildScript"

    在powershell中运行npm run postbuildNamingScript会将JS文件移动到build/new-folder-name并从index.html指向新位置。

    如果您在初次发布三年后就遇到这个问题，因为这仍然对您来说是个问题，请考虑支持此建议以支持新的BUILD_PATH环境变量。

    https://github.com/facebook/create-react-app/pull/8986

    从提案的文档中：

    By default, Create React App will output compiled assets to a /build directory adjacent to /src. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.

    如果采用此建议，则意味着为create-react-app定制输出目标变得像更新更新构建脚本一样简单：

    1
    2
    3
    4
    5
    // package.json
     "scripts": {
       "build":"BUILD_PATH='./dist' react-scripts build",
        // ...
      },

    或将.env文件添加到项目的根目录：

    1
    2
    # .env
    BUILD_PATH='./dist'

    在应用程序源中打开命令提示符。
    运行命令

    npm run eject

    打开您的scripts / build.js文件，并将其添加到"使用严格"行之后的文件开头

    1
    2
    3
    4
    5
    'use strict';
    ....
    process.env.PUBLIC_URL = './'
    // Provide the current path
    .....

    enter image description here

    打开您的config / paths.js，然后将exports对象中的buildApp属性修改为目标文件夹。 (在这里，我提供" react-app-scss"作为目标文件夹)

    1
    2
    3
    4
    5
    module.exports = {
    .....
    appBuild: resolveApp('build/react-app-scss'),
    .....
    }

    enter image description here

    跑

    npm run build

    注意：建议不要运行依赖于平台的脚本

    对于仍在寻找适用于Linux和Windows的答案的任何人：

    将此添加到package.json中的scripts部分

    1
    "build":"react-scripts build && mv build ../docs || move build ../docs",

    带有../docs的是您要将构建文件夹移动到的相对文件夹

    webpack =>

    重命名为dist

    1
    2
    3
    4
    output: {
          filename: '[name].bundle.js',
          path: path.resolve(__dirname, 'dist'),
        },

    您可以在根目录下通过一点技巧来更新配置：

  • npm运行弹出
  • config / webpack.config.prod.js-第61行-将路径更改为：__dirname +'./../--您选择的目录-'
  • config / paths.js-第68行-更新为resolveApp('./--您选择的目录-')

    • 用您要在其上构建的文件夹目录替换-您选择的目录-

    请注意，我提供的路径可能有点脏，但这就是修改配置所需的全部工作。