Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "the method of creating a project based on create-react-app in react". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "the method of creating a project based on create-react-app in react" can help you solve the problem.

What is create-react-app?

Create-react-app is a js library, which can be used to easily set up a react project, eliminating the trouble of configuring webpack, debugging the server and running scripts when setting up a react project. You only need to use this library to complete the creation and initialization of the react project with one click.

First, create a react project using create-react-app

Note: the content wrapped in "[]" is customizable, such as cd [project-name], which may actually be cd my-app or cd my-project. In short, the content of the "[]" package only represents the corresponding variables in the context.

Npm install-g create-react-app create-react-app [project-name] cd [project-name]

After running the above command, you are already in the new project, and you are now running npm run start and npm run build. However, all configurations are hidden by default, and to customize the configuration, you need to run a command:

Npm run eject

At this point, you will be prompted that the command is irreversible, whether to continue or not, type y, so that all the configuration items are out. At this time, you can also make some customized configurations, such as:

Modify the output location after build

Static resources such as js / css / img are output under build-> static by default, and their configuration items are in config-> webpack.config.prod.js.

Js is in the output attribute, about line 60

Css is declared at the beginning of the cssFilename variable, about line 38

The picture is in the loader configuration of module-> rules, about line 143

The map file is controlled by the devtool attribute. If you don't want map, you can comment it out, about line 57.

Manifest.json in the configuration of ManifestPlugin, about 294 lines

The basic template is in the configuration of HtmlWebpackPlugin, but you can see that the'. / paths.js' file is quoted, so modify the appHtml attribute in config-> paths.js.

By default, the build directory is cleared when build, and the configuration item is fs.emptyDirSync (paths.appBuild) in scripts-> build.js. In this sentence, commenting out will not delete the old file (it may be used in grayscale publishing).

Do not eject other ways to modify configuration

In addition to all the configuration files exposed by npm run eject, there are other ways to modify the configuration, which are not expanded for the reasons of the topic in this article, but only related links are given.

One (some people think) more elegant approach is to introduce the react-app-rewired plug-in to implement configuration coverage. You need to create a new config-overrides.js file in the root directory and write whatever you want to configure. ), and you also need to rewrite npm start and other related commands. Click the link for details.

Another reference can be made to Adding a CSS Preprocessor (Sass, Less etc.) recommended on create-react-app 's git home page. Examples. The general idea is to install a plug-in node-sass-chokidar that compiles sass in the node environment, and then use npm-run-all to run both npm start and watch-css (commands to listen to sass files).

React and others are not packaged as global variables.

In order to take advantage of cdn, we often refer to the script tags of react or other similar libraries in the page, so that there are corresponding global variables in the browser environment, while reducing the size of the js. Let's take react as an example.

First, add the following code to the configuration of config-> webpack.config.prod.js:

Module.exports = {... Externals: {'react':' React', 'react-dom':' ReactDOM'},...}

Key corresponds to the name of the library, and value corresponds to the name of the global variable. Note here that the name of the global variable should be the same as the name of the import in the code, and ensure the specification.

In addition, here you want to modify the template file of the html-webpack-plugin plug-in configuration, because you need to add global variables, so you can add the corresponding script. Take public-> index.html as an example:

You need to enable JavaScript to run this app.

Q: since there are global variables in browsers, such as window.React, there is no need for import React from 'react' in the code. Further, if you don't even have to quote react, what's the use of setting externals?

A: if you remove the files from import and external,build as mentioned above, you can run smoothly on the browser side. However, if the server is started during development, then the server side will not be able to analyze the reference and hot update. In addition, for the front and back end isomorphism, the server side will not be able to find dependencies. So, if you are listening to static files and refresh your browser manually, import and external are theoretically fine.

Install sass or less (take sass as an example)

Npm install sass-loader node-sass-save-dev

Or

Npm install less-loader less--save-dev

After installation, modify config-> webpack.config.dev.js and webpack.config.prod.js, respectively, in the loader configuration of css:

First, test: /\ .css $/ add scss and sass;. Second, add a loader to use and directly add "sass-loader". There is no need to configure anything else (the same as less).

/ / test: /\ .css $/ test: /\. (css | scss | sass) $/. Use: [{...}, "sass-loader"]

Add ant-design

Install antd and the plug-in babel-plugin-import that loads on demand

Npm install antd babel-plugin-import-save-dev

In the options configuration of babel-loader in config-> webpack.config.dev.js and webpack.config.prod.js (or .babelrc file), add the following code:

Plugins: [['import', {libraryName:' antd', style: 'css'}] / / `style: true` loads the less file]

If style:true is enabled, then less must be installed.

This is the end of the introduction to "react's method of creating projects based on create-react-app". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.