覆盖创建React App web pack配置而不推出

・18 分钟阅读

  • 源代码名称: react-app-rewired
  • 源代码网址: https://www.github.com/timarney/react-app-rewired
  • react-app-rewired的文档
  • react-app-rewired的源代码下载
  • Git URL:
    git://www.github.com/timarney/react-app-rewired.git
  • Git Clone代码到本地:
    git clone https://www.github.com/timarney/react-app-rewired
  • Subversion代码到本地:
    $ svn co --depth empty https://www.github.com/timarney/react-app-rewired
                              Checked out revision 1.
                              $ cd repo
                              $ svn up trunk
              
  • npm versionnpm monthly downloads

    react-app-rewired

    重新连接你的应用程序

    在不使用'eject '的情况下调整create-react-app webpack配置,而且无需创建react-scripts的分支。

    create-react-app的所有好处,没有"no config "的限制。您可以根据需要添加插件,加载器。

    你所要做的就是使用create-react-app创建你的应用,然后重新连接它

    请注意:

    通过这样做,你打破了CRA 提供的"保修"",也就是说你现在管控 "自己"的配置,不提供任何支持,小心点。

    如何重新连接create-react-app项目 ,1)安装react-app-rewired
    $ npm install react-app-rewired --save-dev
    2)在root目录中创建一个config-overrides.js文件
    /* config-overrides.js */module.exports=functionoverride(config, env) {
     //do stuff with the webpack config...return config;
    }
    
    +-- your-project
    
    
    | +-- config-overrides.js
    
    
    | +-- node_modules
    
    
    | +-- package.json
    
    
    | +-- public
    
    
    | +-- README.md
    
    
    | +-- src
    
    
    
    

    注意:你可以使用默认的rewires (查看软件包目录)或injectBabelPlugin

    3)在npm脚本中将现有调用转换为react-scripts
     /* package.json */
     "scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- "test": "react-scripts test --env=jsdom",+ "test": "react-app-rewired test --env=jsdom"}
    4)启动开发服务器
    $ npm start
    5,建立你的应用程序,
    $ npm run build

    实用程序

    1)injectBabelPlugin

    添加Babel插件可以通过 injectBabelPlugin(pluginName, config) 函数还可以使用此repo中的"重新连接"包或下面列出的"通用配置修改"

    constrewireMobX=require('react-app-rewire-mobx');constrewirePreact=require('react-app-rewire-preact');const {injectBabelPlugin} =require('react-app-rewired');/* config-overrides.js */module.exports=functionoverride(config, env) {
     // add a plugin config =injectBabelPlugin('emotion/babel',config)
     // use the Preact rewireif (env ==="production") {
     console.log("⚡ Production build with Preact");
     config =rewirePreact(config, env);
     }
     // use the MobX rewire config =rewireMobX(config,env);
     return config;
    }
    2)组成(v1.3.4后)

    你可以使用这个工具来组成重新rewires。

    函数编程工具,执行right-to-left函数组合,
    更详细的信息你可以看到Ramdaredux

    首先:

    /* config-overrides.js */module.exports=functionoverride(config, env) {
     config =rewireLess(config, env);
     config =rewirePreact(config, env);
     config =rewireMobX(config, env);
     return config;
    }

    使用 compose 后:

    /* config-overrides.js */const { compose } =require('react-app-rewired');module.exports=compose(
     rewireLess,
     rewirePreact,
     rewireMobx
     ...)// custom config module.exports=function(config, env){
     constrewires=compose(
     rewireLess,
     rewirePreact,
     rewireMobx
     ... );
     // do custom config// ...returnrewires(config, env);
    }

    如果你想为rewire添加一些extra param那么可以使用重新连接

    可选参数:
    你可以看到react-app-rewire-less

    需要的参数:

    // rewireSome.jsfunctioncreateRewire(requiredParams){
     returnfunctionrewire(config, env){
     ///return config
     }
    }module.exports= createRewire;

    扩展配置选项

    默认情况下,config-overrides.js文件导出一个单独的函数,用于在开发或生产模式下编译react app配置,可以从包含最多三个字段的文件中导出一个对象,其中每个字段都是一个函数,这种替代形式允许你定制用于Jest (在测试中)的配置,以及web pack开发服务器本身。

    此示例实现用于演示使用每个对象要求函数,在示例中,函数:

    • 使用react-app-rewire-less包向项目中添加LESS支持
    • 根据 .env 变量有条件地运行一些测试
    • 设置用于开发服务器的https证书,并且在.env文件变量中指定文件名,
    module.exports= {
     // The Webpack config to use when compiling your react app for development or production.webpack:function(config, env) {
     // ...add your webpack config customisation, rewires, etc...// Example: add less support to your app.constrewireLess=require('react-app-rewire-less');
     config =rewireLess(config, env);
     return config;
     },
     // The Jest config to use when running your jest tests - note that the normal rewires do not// work here.jest:function(config) {
     // ...add your jest config customisation...// Example: enable/disable some tests based on environment variables in the .env file.if (!config.testPathIgnorePatterns) {
     config.testPathIgnorePatterns= [];
     }
     if (!process.env.RUN_COMPONENT_TESTS) {
     config.testPathIgnorePatterns.push('<rootDir>/src/components/**/*.test.js');
     }
     if (!process.env.RUN_REDUCER_TESTS) {
     config.testPathIgnorePatterns.push('<rootDir>/src/reducers/**/*.test.js');
     }
     return config;
     },
     // The function to use to create a webpack dev server configuration when running the development// server with 'npm run start' or 'yarn start'.// Example: set the dev server to use a specific certificate in https.devServer:function(configFunction) {
     // Return the replacement function for create-react-app to use to generate the Webpack// Development Server config. "configFunction" is the function that would normally have// been used to generate the Webpack Development server config - you can use it to create// a starting configuration to then modify instead of having to create a config from scratch.returnfunction(proxy, allowedHost) {
     // Create the default config by calling configFunction with the proxy/allowedHost parametersconstconfig=configFunction(proxy, allowedHost);
     // Change the https certificate options to match your certificate, using the .env file to// set the file paths & passphrase.constfs=require('fs');
     config.https= {
     key:fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
     cert:fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
     ca:fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
     passphrase:process.env.REACT_HTTPS_PASS };
     // Return your customised Webpack Development Server config.return config;
     }
     }
    }
    1)web pack配置-开发& 生产

    webpack字段用于提供与从config-overrides.js导出的单个函数等效的值,这里是所有常用的rewires ,它无法在测试模式下配置编译,因为测试模式根本无法通过Webpack运行(它在Jest中运行)。它也不能用于自定义用于在开发模式下提供页面的Webpack Dev Server,因为create-react-app生成一个单独的Webpack配置,以便与使用不同函数和默认值的dev服务器一起使用。

    2)配置-测试

    Webpack不用于在测试模式下编译应用程序 - 而是使用Jest。这意味着您的webpack配置自定义函数中指定的任何重新连接都不会在测试模式下应用于您的项目。

    React-app-rewired自动允许你在package.json文件的jest部分自定义你的配置,包括允许你设置create-react-app的配置字段,它还自动设置Jest,在运行测试之前用Babel编译这个项目,Jest选项的配置在Jest网站中单独记录。

    如果要将插件和/或预设添加到Jest将使用的Babel配置中,则需要在package.json文件内的babel部分或.babelrc文件中定义这些插件/预设。React-app-rewired改变Jest配置,以便在Jest编译React App时使用这些定义文件指定Babel选项,在package.json或babelrc文件Babel section中使用的格式在Babel网站中单独记录。

    config-overrides.js中module.exports对象中的jest字段用于指定可以调用的函数,以便以package.json文件的jest部分中不可能的方式自定义Jest测试配置。例如,它将允许你基于环境变量更改某些配置选项,此函数作为参数传递默认的create-react-app Jest配置,并且需要返回要使用的已修改的Jest配置。很多时候,只需使用文件部分和文件(package.json中的babel section )的组合,而不需要提供package.json函数即可。

    3)web pack开发服务器

    在开发模式下运行时,create-react-app不会对开发服务器(为应用页面提供服务的那个)使用通常的web pack配置,这意味着您无法使用config-overrides.js服务器的常规webpack部分来更改Development Server设置,因为这些更改不会被应用。

    因此create-react-app期望能够在需要时调用一个函数来生成web pack dev服务器,这个函数提供了代理和allowedHost设置的参数,这些参数将在web pack dev服务器(create-react-app从package.json文件中检索这些参数的值)中使用。

    React-app-rewired提供了通过使用config-overrides.js中module.exports对象中的devServer字段来重写这个函数的能力,它提供devServer函数一个包含默认create-react-app函数的参数,通常用于生成dev服务器配置(它不能提供配置的生成版本,因为react-scripts正在直接调用生成函数),React-app-rewired需要作为一个返回值来接收create-react-app,然后用于生成开发服务器配置(换句话说),返回值应该是一个新函数,它接受代理和allowedHost两个参数,并且它本身返回web pack开发服务器配置,原始反应脚本函数被传递到config-overrides.js devServer函数,以便你能够轻松地根据create-react-app使用的默认值来生成初始的devServer配置。

    4)为第三方工具提供重新连接web pack配置

    有些第三方工具,如react-cosmos,依赖web pack配置,你可以使用以下代码段创建 webpack.config.js 文件,并且导出重新连接的配置:

    const { paths } =require('react-app-rewired');// require normalized overridesconstoverrides=require('react-app-rewired/config-overrides');constconfig=require(paths.scriptVersion+'/config/webpack.config.dev');module.exports=overrides.webpack(config, process.env.NODE_ENV);

    然后在工具配置中指向这个文件。

    附加问题和选项

    1)入口点: 'src/index.js'

    此时,由于文件包含在create-react-app中,因此很难从默认src/index.js文件更改入口点,正常的重新布线过程被几个create-react-app脚本绕过。

    这里有三种解决方法:

    • 只需在src/index.js文件中输入/导入你想要的文件,就像:
    require('./index.tsx');
    • 使用自定义版本的反应脚本包,更改脚本内部的入口点(例如,用于typeScript项目的react-scripts-ts -有关如何使用react-app-rewired的自定义脚本版本的信息,请参见下面的主题),
    • react-dev-utils/checkRequiredFiles函数重写为始终return true,
    • 2)自定义脚本版本

    你可以通过指定命令行选项--scripts-version中脚本包的名称,将react-scripts包的自定义版本与react-app-rewired一起使用。

    使用脚本版本选项的一个工作示例是:

    {
     "scripts": {
     "start": "react-app-rewired start --scripts-version react-scripts-ts",
     "build": "react-app-rewired build --scripts-version react-scripts-ts",
     "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom",
     "eject": "react-scripts eject" }
    }

    React-app-rewired需要一个自定义的响应脚本包来提供以下文件:

    • config/env.js
    • config/webpack.config.dev.js
    • config/webpack.config.prod.js
    • config/webpackDevServer.config.js
    • scripts/build.js
    • scripts/start.js
    • scripts/test.js
    • scripts/utils/createJestConfig.js
    3)将配置替代指定为目录

    React-app-rewired不使用extension.js'导入你的config-overrides.js文件,这意味着在项目的root中创建名为config-overrides的目录,并且从该目录中的默认index.js文件导出你的替代。

    如果使用目录有几个自定义重写,可以将每个重写放在单独的文件中,可以在guria/rewired-ts-boilerplate中找到一个示例模板。

    4)指定config-overrides位置

    如果你需要更改config-overrides.js的位置,可以将命令行选项--config-overrides传递给react-app-rewired脚本。

    社区维持Rewires

    Babel插件

    web pack插件

    加载程序

    其他

    为什么该项目存在

    请参阅:创建React App-But我不想Eject 。

    讨论
    Fansisi profile image