Create-react-app Creating a Antd-mobile development environment (records in learning)

(Refer to others to combine their own collation, if there are errors please God point out)

Facebook's official launch of the Create-react-app scaffolding, the basic can be zero configuration to build a Webpack-based React development environment, built-in thermal update and other functions.

Detailed documentation to link to: Create-react-app documentation

This article will introduce the development environment using CREATE-REACT-APP scaffolding to build antd-mobile.

Quick Start:

NPM install-g Create-react-app/*installing Create-react-app, we recommend using CNPM*/Create-react-app MyApp/*Create an app with a command, MyApp is the project name*/CD MyApp/*Enter the directory, and then start*/NPM Start/*Start Run*/

By doing this, you can quickly create a react development environment.

will automatically open the default browser http://localhost:3000/

Environment Configuration Introduction: First, the project structure:

After the project is built, the scaffold is "elegant" ... All Webpack related profiles are hidden, and when you view the MyApp folder directory, you will find that no webpack configuration files are found. Execute the following command:

NPM Run Eject

View the MyApp folder to see the complete project structure:

myapp/Node_modules//*This is a dependency of all downloads*/package.json. gitignore config/paths.js polyfills env.js webpack.config.dev.js webpack.config.prod.js public
    /index.html/*Portal HTML file*/Scripts/<b>build.js</b>/* Package Command configuration file */<b>start.js</b>/* Start Command profile */test.js src/app.js index.js/*Main entry file*/

Ii. introduction of the project configuration

Put on Webpack, NPM's Charging Portal: "Webpack Learning Tutorial"

See the scripts of the Package.json file,

"Scripts""Start": "Node Scripts/start.js""Build": "Node Scripts/build.js",},

It is known that the runtime is directly executing the JS file in the scripts file directory.

Where *start.js* is the development environment, *BUILD.JS* is a packaged script.

Build.js There is a problem with the file path referenced in the package generated here

Workaround in another piece of article React.js-Create-react-app-based file root path modification after packaging

CSS preprocessor configuration for SASS and less

Facebook official upgrade to a version of the Create-react-app, suddenly lost the default to sass, less and other pre-processor support, Official document description

So, can only do their own, in the Config directory,webpack.config.dev.js and webpack.config.prod.js files, did not extract loader, POSTCSS General Common configuration, so that in two folders are configured together, you can also extract the common parts for maintenance.

Here with webpack.config.dev.js example,webpack.config.prod.js like configuration can:

Sass-loader:

1, command line, in the current directory execution:

NPM Install Sass-loader Node-sass--save-dev

2. Find the first item in the loaders in the Webpack.config.dev.js file exclude (the value is an array), exclude the Scss file, otherwise it will be captured by ' Url-loader '.

{exclude: [    /\.html$/,    /\. ( JS|JSX) (\?. *) $/,    /\.css$/,    /\.json$/,    /\.svg$/,    /\.scss$/     .... New Item! ]

3, Loaders added one item:

{    /\.scss$/,    ' style!css!postcss!sass?outputstyle=expanded '},

At this point, the Sass file can be properly packaged (here for scss files, such as the use of sass, you can change the SCSS regular), less files similar, no longer repeat.

Iii. Introduction and configuration of Antd-mobile

Execute at the command line:

NPM Install Antd-mobile--save

Mobile-side HD Solution

Due to the 0.8 version of the introduction of mobile high-definition solution, so need to add the corresponding configuration in Webpack, * * Must be configured! * *, official instructions can be configured according to official instructions.

On-Demand Introduction

In order to reduce the volume after packaging and easy to write, the Babel-plugin-import plug-in can be configured after the introduction of modules as follows:

Import {picker} from ' Antd-mobile ';

Automatic introduction of CSS and JS, no need to introduce the entire antd-mobile of the entire CSS file

Use the following:

Command line execution:

NPM Install Babel-plugin-import--save-dev

After the installation is complete, create a new file in the root directory named:. babelrc.js

"Presets""es2015""react""plugins""import""LibraryName": " antd-mobile "style": "CSS" }]]}

Enter the above content in the file for Babel configuration.

And then!!! The most important step is to Package.json the babel configuration to delete, especially: react-app!!!

In Webpack.config.dev.js and Webpack.config.prod.js, a new '. Web.js ' is needed for the extensions of resolve.

The Antd-mobile Web version of the file suffix is. web.js.

Iv. Miscellaneous React-router versions

Now the latest version react-router for 4.x.x, with the original 2.x.x API changes slightly larger (the official skip the 3 ... ), if you want to use the 2.x.x version, you can uninstall router and execute the command

PM Remove React-router--save

Then dependencies the new fields in Package.json:

"React-router": "^2.0.0 < 3.0.0",

Then execute:

NPM Install

Here, even if the development environment has been built, it can be developed normally.

Most references: Pinterest Chupeng City, if reproduced please @ source

Create-react-app Creating a Antd-mobile development environment (records in learning)