CRA+react-app-rewired build reactH5 shelf

CRA+react-app-rewired build reactH5 shelf

This is the first day I participated in the more text challenge

Preface

  • This article mainly adopted
    create-react-app
    Scaffolding
    react-app-rewired
    Add some additional webpack configuration to build a based
    vw
    H5 shelf

begin

1. Installation

npx create-react-app juejin- react-h5 ( name of your project) Copy the code

2. Next, we install the relevant dependencies

//Install the basic UI library andt-mobile yarn add antd-mobile //Install react-app-rewired customize-cra to add webpack related configuration, //these two packages should not be packaged in the project, so only need to be installed in the development environment yarn add react-app-rewired customize-cra -D //babel-plugin-import this is the subcontracting tool yarn add babel-plugin- import -D Copy code

3. Modify
package.json
Startup item

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

4. Create one in the project root directory
config-overrides.js
Used to modify the default configuration

const {override, fixBabelImports} = require ( "customize-cra" ) module .exports = override( fixBabelImports( "import" , { libraryName : 'antd-mobile' , style : 'css' , }) ) Copy code

5. Modify app.js

Import {} the Button from 'antd-Mobile' function App () { return ( < div className = "App" > < Button type = "primary" > Button </Button > </div > ); } export default App; copy code

6. Start the project and visit
localhost:3000

yarn start Copy the code

7. Open the page and switch to mobile development mode to see the renderings

8. Next, we install the CSS pre-compilation tool (select sass here)

yarn add sass copy the code

9. Then we create a new app.scss file under src and write some test css

.p { color : red; width : 750px ; } Copy code

10. Finally, introduce app.scss in app.js and restart the project

When we saw this rendering, sass was successfully introduced

11. Configure sass global variables

//First install a loader and path yarn add sass-resources-loader path -D const resolve = _path => path.resolve(__dirname, _path) module .exports = override( fixBabelImports( 'import' , { libraryName : 'antd-mobile' , style : 'css' , }), adjustStyleLoaders( rule => { if (rule.test.toString().includes( 'scss' )) { rule.use.push({ loader : require .resolve( 'sass-resources-loader' ), options : { resources : [resolve( "./src/styles/theme.scss" )] } }); }}) ) Copy code
  • Next we create the theme.scss file and write a color variable
$red: red; copy code
  • We can use it in app.scss
.p { color : $red; width : 750px ; } Copy code
  • The effect is still no problem

12. Below we will put the unit
px
Convert to
vw
Bar

//Install postcss-px-to-viewport yarn add postcss-px-to-viewport -D Copy code

13, let's modify the
config-overrides.js
Code in

const {override, fixBabelImports, addPostcssPlugins} = require ( "customize-cra" ) module .exports = override( fixBabelImports( 'import' , { libraryName : 'antd-mobile' , style : 'css' , }), adjustStyleLoaders( rule => { if (rule.test.toString().includes( 'scss' )) { rule.use.push({ loader : require .resolve( 'sass-resources-loader' ), options : { resources : [resolve( "./src/styles/theme.scss" )] } }); }}), addPostcssPlugins([ require ( "postcss-px-to-viewport" )({ unitToConvert : 'px' , //The unit to be converted, the default is'px ' viewportWidth : 750 , //The viewport width of the design draft unitPrecision : 6 , //px The precision retained after converting to vw (retaining a few decimal places) propList : [ '*' ], //Those properties can be converted to vw * to represent all viewportUnit : 'vw' , //The viewport unit you want to use//vw fontViewportUnit : 'vw' , //The viewport unit used by the font selectorBlackList : [], //CSS selectors that need to be ignored will not be converted to viewport units, and the original minPixelValue such as px will be used: 1 , //Set the minimum conversion value. If it is 1, only values greater than 1 will be converted mediaQuery : false , //Does the unit in the media query need to be converted? replace : true , //Whether to directly replace the attribute , Without adding the alternate attribute exclude : [ /node_modules/ ], //Ignore files under certain folders or specific files, such as files under'node_modules' landscape : false , //Whether to add media query conditions generated based on landscapeWidth @media (orientation: landscape) landscapeUnit : 'vw' //The unit used in landscape }) ]) ) Copy code

14. When we start the project again, we can see that the 750px in the p tag has been changed to 100vw (because our viewport width is set to 750)

15, add
Lodash
Tool library to realize on-demand loading

yarn add lodash //Add lodash to config-overrides.js to load fixBabelImports( "lodash" , { libraryDirectory : "" , camel2DashComponentName : false }) Copy code

16, add
@
Alias

  • In vue we often write
    @/xx/xx
    , Configure like this in CRA
const path = require ( "path" ) const {override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require ( "customize-cra" ) const resolve = dir => path.resolve(__dirname, dir) module .exports = override( fixBabelImports( 'import' , { libraryName : 'antd-mobile' , style : 'css' , }), addWebpackAlias({ [ "@" ]: resolve( "./src" ) }), addPostcssPlugins([ require ( "postcss-px-to-viewport" )({ unitToConvert : 'px' , //The unit to be converted, the default is'px ' viewportWidth : 750 , //The viewport width of the design draft unitPrecision : 6 , //px Preserved precision after converting to vw (retaining several decimal places) : 1 , //Set the minimum conversion value. If it is 1, only values greater than 1 will be converted mediaQuery : false , //Does the unit in the media query need to be converted? Unit replacement : propList : [ '*' ], //Those properties can be converted to vw * to represent all viewportUnit : 'vw' , //The viewport unit you want to use//vw fontViewportUnit : 'vw' , //The viewport unit used by the font selectorBlackList : [], //CSS selectors that need to be ignored will not be converted to viewport units, and the original minPixelValue such as px will be used true , //Whether to directly replace the attribute , Without adding the alternate attribute exclude : [ /node_modules/ ], //Ignore files under certain folders or specific files, such as files under'node_modules' landscape : false , //Whether to add media query conditions generated based on landscapeWidth @media (orientation: landscape) landscapeUnit : 'vw' //The unit used in landscape }) ]) ) Copy code

17, handle cross-domain

  • In the process of joint debugging of the interface between us and our back-end partners, there will be cross-domain problems. The configuration of CRA is as follows
const path = require ( "path" ); const {override, fixBabelImports, addWebpackAlias, addPostcssPlugins, overrideDevServer} = require ( 'customize-cra' ); const resolve = _path => path.resolve(__dirname, _path) module .exports = { webpack : override( fixBabelImports( 'import' , { libraryName : 'antd-mobile' , style : 'css' , }), fixBabelImports( "lodash" , { libraryDirectory : "" , camel2DashComponentName : false }), addWebpackAlias({ [ '@' ]: resolve( "./src" ) }), addPostcssPlugins([ require ( "postcss-px-to-viewport" )({ unitToConvert : 'px' , //The unit to be converted, the default is'px ' viewportWidth : 750 , //The viewport width of the design draft unitPrecision : 6 , //px after transfer accuracy vw reserved (reserved decimal places) propList : [ '*' ], //those properties may be converted into vw * representing the entire viewportUnit : 'vw' , , //set the minimum conversion value, if 1 If, only values greater than 1 will be converted mediaQuery : false , //Does the unit in the media query need to be converted replace : true , //The viewport unit you want to use//vw fontViewportUnit : 'vw' , //The viewport unit used by the font selectorBlackList : [], //CSS selectors that need to be ignored will not be converted to viewport units, and the original minPixelValue such as px will be used: 1//Whether to directly replace the attribute , Without adding the alternate attribute exclude : [ /node_modules/ ], //Ignore files under certain folders or specific files, such as files under'node_modules' landscape : false , //Whether to add media query conditions generated based on landscapeWidth @media (orientation: landscape) landscapeUnit : 'vw' //The unit used in landscape }) ]) ), devServer : overrideDevServer([ config => ({ ...config, proxy : { "/api" : { target : "http://localhost:4444" , pathRewrite : { "^/api" : "" } } } }) ]), } Copy code
  • This time when we visit
    /api
    At the beginning of the interface, the requested address will be proxied to
    http://localhost:4444
  • /api/test
    Will be proxied into
    http://localhost:4444/test

18. Real machine problem

  • First modify our
    app.js
    with
    app.scss
  • We added 50 p tags to the page for testing
Import {} the Button from 'antd-Mobile' Import '@/app.scss' function App () { return ( < div className = "App" > { Array(50).fill(1).map((item, idx) => ( < p className = "p" key = {idx} > A custom css style text, Article {idx} </p > )) } < Button type = "primary" > Button </Button > </div > ); } export default App; copy code
  • Then we clear
    p
    Label margin
.p { color : red; width : 750px ; margin : 0 ; padding : 0 ; } Copy code
  • Next, we use the mobile phone to connect to the wifi corresponding to the computer and access the computer s ip,
Enter ifconfig to copy the code

  • Then open it with your phone
    http://10.5.9.250:3000/
    , You can see our page

  • At this time, we see that the button of the mobile phone (iphoneX) is blocked by the small black bar at the bottom.
  • Solution
    • Find the public/index.html mate tag and add the viewport-fit=cover attribute
      <meta name="viewport" content="width=device-width, initial-scale=1,viewport-fit=cover"/>
    • body add css like this
    body { padding-bottom : constant (safe-area-inset-bottom); padding-bottom : env (safe-area-inset-bottom); } Copy code
  • Then we restart the project and check again on the real machine

  • At this time, the small black bar at the bottom will not block the button

19. Complete code

  • package.json
{ "name" : "juejin-react-h5" , "version" : "0.1.0" , "private" : true , "dependencies" : { "@testing-library/jest-dom" : "^5.11.4 " , "@testing-library/react" : "^11.1.0" , "@testing-library/user-event" : "^12.1.10" , "antd-mobile" : "^2.3.4" , " path" : "^0.12.7" , "react" : "^17.0.2" , "react-dom" :"^17.0.2" , "react-scripts" : "4.0.3" , "sass" : "^1.34.1" , "web-vitals" : "^1.0.1" }, "scripts" : { "start" : "react-app-rewired start" , "build" : "react-app-rewired build" , "test" : "react-app-rewired test --env=jsdom" , " eject" : "react-scripts eject" }, "eslintConfig" : { "extends" : [ "react-app" , "react-app/jest" ] }, "browserslist" : { "production" : [ ">0.2%" , "not dead" , "not op_mini all" ], "development" : [ "last 1 chrome version" , "last 1 firefox version" , "last 1 safari version" ] }, "devDependencies" : { "babel-plugin-import" : "^1.13.3" , "customize-cra" : "^1.0.0" , "postcss-px-to-viewport" : "^1.1.1" , "react-app-rewired" : "^2.1.8" , "sass-resources-loader" : "^2.2.1" } } Copy code
  • config-overrides.js
const path = require ( "path" ); const {override, fixBabelImports, addWebpackAlias, addPostcssPlugins, adjustStyleLoaders, overrideDevServer} = require ( 'customize-cra' ); const resolve = _path => path.resolve(__dirname, _path) module .exports = { webpack : override( //antd-mobile subpackage fixBabelImports( 'import' , { libraryName : 'antd-mobile' , style : 'css' , }), //lodash subpackage fixBabelImports( "lodash" , { libraryDirectory : "" , camel2DashComponentName : false }), //Alias addWebpackAlias({ [ '@' ]: resolve( "./src" ) }), //Add loader global css adjustStyleLoaders( rule => { if (rule.test.toString().includes( 'scss' )) { rule.use.push({ loader : require .resolve( 'sass-resources-loader' ), options : { resources : [resolve( "./src/styles/theme.scss" )] } }); }}), //px to vw addPostcssPlugins([ require ( "postcss-px-to-viewport" )({ unitToConvert : 'px' , //The unit to be converted, the default is'px ' viewportWidth : 750 , //The viewport width of the design draft unitPrecision : 6 , //px The precision retained after converting to vw (retaining a few decimal places) propList : [ '*' ], //Those properties can be converted to vw * to represent all viewportUnit : 'vw' , //The viewport unit you want to use//vw fontViewportUnit : 'vw' , //The viewport unit used by the font selectorBlackList : [], //CSS selectors that need to be ignored will not be converted to viewport units, and the original minPixelValue such as px will be used : 1, //Set the minimum conversion value, if it is 1, only the value greater than 1 will be converted mediaQuery : false , //Does the unit in the media query need to be converted replace : true , //Whether to directly replace the attribute value, and Do not add alternate attributes exclude : [ /node_modules/ ], //Ignore files under certain folders or specific files, such as files under'node_modules' landscape : false , //Whether to add media query conditions generated according to landscapeWidth @media (orientation: landscape) landscapeUnit : 'vw' //The unit used in landscape }) ]) ), //Local development related devServer : overrideDevServer([ config => ({ ...config, proxy : { "/api" : { target : "http://localhost:4444" , pathRewrite : { "^/api" : "" } } } }) ]), } Copy code

20. Project address github.com/Tyf2345/jue...

references

Write at the end

  • When you see this, first of all, you are a person with great perseverance. There is no illustration in this article. It is all work. If you see it from the beginning to the end, give yourself a thumbs up
  • This article mainly builds a React H5 shelf. From layout to style to interface forwarding, the basic functions have been built.
  • Everyone is welcome to comment and point out the imperfections