mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-06-10 23:39:14 +08:00
102 lines
22 KiB
HTML
102 lines
22 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Advanced Configuration · Create React App</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p>You can adjust various development and production settings by setting environment variables in your shell or with <a href="/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env">.env</a>.</p>
|
||
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Advanced Configuration · Create React App"/><meta property="og:type" content="website"/><meta property="og:url" content="https://create-react-app.dev/index.html"/><meta property="og:description" content="<p>You can adjust various development and production settings by setting environment variables in your shell or with <a href="/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env">.env</a>.</p>
|
||
"/><meta property="og:image" content="https://create-react-app.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://create-react-app.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
addBackToTop(
|
||
{"zIndex":100}
|
||
)
|
||
});
|
||
</script><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/logo.svg" alt="Create React App"/><h2 class="headerTitleWithLogo">Create React App</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="https://reactjs.org/community/support.html" target="_self">Help</a></li><li class=""><a href="https://www.github.com/facebook/create-react-app" target="_self">GitHub</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Advanced Usage</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Welcome<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/documentation-intro">About Docs</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Getting Started<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/folder-structure">Folder Structure</a></li><li class="navListItem"><a class="navItem" href="/docs/available-scripts">Available Scripts</a></li><li class="navListItem"><a class="navItem" href="/docs/supported-browsers-features">Supported Browsers and Features</a></li><li class="navListItem"><a class="navItem" href="/docs/updating-to-new-releases">Updating to New Releases</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Development<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/setting-up-your-editor">Editor Setup</a></li><li class="navListItem"><a class="navItem" href="/docs/developing-components-in-isolation">Developing Components in Isolation</a></li><li class="navListItem"><a class="navItem" href="/docs/analyzing-the-bundle-size">Analyzing Bundle Size</a></li><li class="navListItem"><a class="navItem" href="/docs/using-https-in-development">HTTPS in Development</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Styles and Assets<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/adding-a-stylesheet">Adding Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-css-modules-stylesheet">Adding CSS Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-sass-stylesheet">Adding Sass Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-css-reset">Adding CSS Reset</a></li><li class="navListItem"><a class="navItem" href="/docs/post-processing-css">Post-Processing CSS</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-images-fonts-and-files">Adding Images, Fonts, and Files</a></li><li class="navListItem"><a class="navItem" href="/docs/loading-graphql-files">Loading .graphql Files</a></li><li class="navListItem"><a class="navItem" href="/docs/using-the-public-folder">Using the Public Folder</a></li><li class="navListItem"><a class="navItem" href="/docs/code-splitting">Code Splitting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Building your App<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/installing-a-dependency">Installing a Dependency</a></li><li class="navListItem"><a class="navItem" href="/docs/importing-a-component">Importing a Component</a></li><li class="navListItem"><a class="navItem" href="/docs/using-global-variables">Using Global Variables</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-bootstrap">Adding Bootstrap</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-flow">Adding Flow</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-typescript">Adding TypeScript</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-relay">Adding Relay</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-a-router">Adding a Router</a></li><li class="navListItem"><a class="navItem" href="/docs/adding-custom-environment-variables">Environment Variables</a></li><li class="navListItem"><a class="navItem" href="/docs/making-a-progressive-web-app">Making a Progressive Web App</a></li><li class="navListItem"><a class="navItem" href="/docs/production-build">Creating a Production Build</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Testing<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/running-tests">Running Tests</a></li><li class="navListItem"><a class="navItem" href="/docs/debugging-tests">Debugging Tests</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Back-End Integration<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/proxying-api-requests-in-development">Proxying in Development</a></li><li class="navListItem"><a class="navItem" href="/docs/fetching-data-with-ajax-requests">Fetching Data</a></li><li class="navListItem"><a class="navItem" href="/docs/integrating-with-an-api-backend">Integrating with an API</a></li><li class="navListItem"><a class="navItem" href="/docs/title-and-meta-tags">Title & Meta Tags</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Deployment<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/deployment">Deployment</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Advanced Usage<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/can-i-use-decorators">Can I Use Decorators?</a></li><li class="navListItem"><a class="navItem" href="/docs/pre-rendering-into-static-html-files">Pre-Rendering Static HTML</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/advanced-configuration">Advanced Configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/alternatives-to-ejecting">Alternatives to Ejecting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Support<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div></div></section></div><script>
|
||
var coll = document.getElementsByClassName('collapsible');
|
||
var checkActiveCategory = true;
|
||
for (var i = 0; i < coll.length; i++) {
|
||
var links = coll[i].nextElementSibling.getElementsByTagName('*');
|
||
if (checkActiveCategory){
|
||
for (var j = 0; j < links.length; j++) {
|
||
if (links[j].classList.contains('navListItemActive')){
|
||
coll[i].nextElementSibling.classList.toggle('hide');
|
||
coll[i].childNodes[1].classList.toggle('rotate');
|
||
checkActiveCategory = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
coll[i].addEventListener('click', function() {
|
||
var arrow = this.childNodes[1];
|
||
arrow.classList.toggle('rotate');
|
||
var content = this.nextElementSibling;
|
||
content.classList.toggle('hide');
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/create-react-app/edit/master/docusaurus/docs/advanced-configuration.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Advanced Configuration</h1></header><article><div><span><p>You can adjust various development and production settings by setting environment variables in your shell or with <a href="/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env">.env</a>.</p>
|
||
<blockquote>
|
||
<p>Note: You do not need to declare <code>REACT_APP_</code> before the below variables as you would with custom environment variables.</p>
|
||
</blockquote>
|
||
<table>
|
||
<thead>
|
||
<tr><th style="text-align:left">Variable</th><th style="text-align:center">Development</th><th style="text-align:center">Production</th><th style="text-align:left">Usage</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style="text-align:left">BROWSER</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a <a href="https://github.com/sindresorhus/open#app">browser</a> to override this behavior, or set it to <code>none</code> to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to <code>npm start</code> will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the <code>.js</code> extension.</td></tr>
|
||
<tr><td style="text-align:left">BROWSER_ARGS</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">When the <code>BROWSER</code> environment variable is specified, any arguments that you set to this environment variable will be passed to the browser instance. Multiple arguments are supported as a space separated list. By default, no arguments are passed through to browsers.</td></tr>
|
||
<tr><td style="text-align:left">HOST</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">By default, the development web server binds to <code>localhost</code>. You may use this variable to specify a different host.</td></tr>
|
||
<tr><td style="text-align:left">PORT</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.</td></tr>
|
||
<tr><td style="text-align:left">HTTPS</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">When set to <code>true</code>, Create React App will run the development server in <code>https</code> mode.</td></tr>
|
||
<tr><td style="text-align:left">PUBLIC_URL</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in <a href="deployment#building-for-relative-paths"><code>package.json</code> (<code>homepage</code>)</a>. Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.</td></tr>
|
||
<tr><td style="text-align:left">CI</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>true</code>, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.</td></tr>
|
||
<tr><td style="text-align:left">REACT_EDITOR</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can <a href="https://github.com/facebook/create-react-app/issues/2636">send a pull request to detect your editor of choice</a>. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems <a href="https://en.wikipedia.org/wiki/PATH_(variable)">PATH</a> environment variable points to your editor’s bin folder. You can also set it to <code>none</code> to disable it completely.</td></tr>
|
||
<tr><td style="text-align:left">CHOKIDAR_USEPOLLING</td><td style="text-align:center">✅ Used</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:left">When set to <code>true</code>, the watcher runs in polling mode, as necessary inside a VM. Use this option if <code>npm start</code> isn't detecting changes.</td></tr>
|
||
<tr><td style="text-align:left">GENERATE_SOURCEMAP</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>false</code>, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.</td></tr>
|
||
<tr><td style="text-align:left">NODE_PATH</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">Same as <a href="https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders"><code>NODE_PATH</code> in Node.js</a>, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting <code>NODE_PATH=src</code>.</td></tr>
|
||
<tr><td style="text-align:left">INLINE_RUNTIME_CHUNK</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">By default, Create React App will embed the runtime script into <code>index.html</code> during the production build. When set to <code>false</code>, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.</td></tr>
|
||
<tr><td style="text-align:left">IMAGE_INLINE_SIZE_LIMIT</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.</td></tr>
|
||
<tr><td style="text-align:left">EXTEND_ESLINT</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>true</code>, ESLint configs that extend <code>eslint-config-react-app</code> will be used by <code>eslint-loader</code>. Any rules that are set to <code>"error"</code> will stop the application from building.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 7/16/2019 by Brody McKee</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pre-rendering-into-static-html-files"><span class="arrow-prev">← </span><span>Pre-Rendering Static HTML</span></a><a class="docs-next button" href="/docs/alternatives-to-ejecting"><span>Alternatives to Ejecting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
document.addEventListener('keyup', function(e) {
|
||
if (e.target !== document.body) {
|
||
return;
|
||
}
|
||
// keyCode for '/' (slash)
|
||
if (e.keyCode === 191) {
|
||
const search = document.getElementById('search_input_react');
|
||
search && search.focus();
|
||
}
|
||
});
|
||
</script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3be60f4f8ffc24c75da84857d6323791',
|
||
indexName: 'create-react-app',
|
||
inputSelector: '#search_input_react'
|
||
});
|
||
</script></body></html> |