This is my first day of the genwen challenge

preface

  • This article mainly throughcreate-react-appScaffolding fitreact-app-rewiredAdd some additional WebPack configuration to build a basevwThe H5 shelf

start

1, install,

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

2. Next, let’s install the dependencies

    // Install the basic UI library andT-Mobile
    yarn add antd-mobile
    // install react-app-rewired customize-cra to add webpack configuration
    // These packages do not need to be packaged in the project, so they only need to be installed in the development environment
    yarn add react-app-rewired customize-cra -D
    // babel-plugin-import is a subcontracting tool
    yarn add babel-plugin-import -D

Copy the code

3, modify,package.jsonstartup

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

Create one in the project root directoryconfig-overrides.jsUsed to modify default configurations

const { override, fixBabelImports }  = require("customize-cra")

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

5. Modify app.js

import { Button } from 'antd-mobile'

function App() {
  return (
    <div className="App">
      <Button type="primary">button</Button>
    </div>
  );
}

export default App;
Copy the code

6. Start the project and accesslocalhost:3000

 yarn start
Copy the code

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

8. Next we install the CSS precompile tool (sASS)

yarn add sass
Copy the code

9. Next, create a new app. SCSS file under SRC and write some test CSS

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

10. Finally, import app. SCSS in app.js and restart the project

When we see this, sASS is introduced successfully

11. Configure the SASS global variable

    // Install a loader and path first
    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 the code
  • Next we create theme. SCSS file and write a color variable
    $red: red;
Copy the code
  • We’ll just use it in app.scSS
    .p{
        color: $red;
        width: 750px;
    }
Copy the code
  • It still works fine

12. Now let’s put the unitpxConverted tovw!

    / / install postcss - px - to - the viewport
    yarn add postcss-px-to-viewport -D
Copy the code

13. Let’s modify thisconfig-overrides.jsThe 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 convert, default is' px '
            viewportWidth: 750.// The viewport width of the design draft
            unitPrecision: 6.// The number of decimal places to keep after converting px to vw
            propList: [The '*'].// Those attributes can be converted to vw * for all
            viewportUnit: 'vw'.// Desired viewport unit // 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, using the original units such as PX
            minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
            mediaQuery: false.// Whether the unit in the media query needs to be converted
            replace: true.// Whether to replace the attribute value directly without adding the standby 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 criteria based on landscapeWidth @media (Orientation: landscape)
            landscapeUnit: 'vw'     // The unit used in landscape})))Copy the code

14. When we started the project again, we could see that 750px in the P label had been changed to 100VW (because our viewport width was set to 750).

15, addLodashTool library, to achieve on-demand loading

    yarn add lodash
    // config-overrides. Js add lodash load on demand
    fixBabelImports("lodash", {
        libraryDirectory: "".camel2DashComponentName: false
    })
Copy the code

16, add@The alias

  • We often write in VUE@/xx/xxIn 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 convert, default is' px '
                viewportWidth: 750.// The viewport width of the design draft
                unitPrecision: 6.// The number of decimal places to keep after converting px to vw
                propList: [The '*'].// Those attributes can be converted to vw * for all
                viewportUnit: 'vw'.// Desired viewport unit // 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, using the original units such as PX
                minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
                mediaQuery: false.// Whether the unit in the media query needs to be converted
                replace: true.// Whether to replace the attribute value directly without adding the standby 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 criteria based on landscapeWidth @media (Orientation: landscape)
                landscapeUnit: 'vw'     // The unit used in landscape})))Copy the code

17. Handle cross-domain

  • Cross-domain problems may exist in the process of interface joint adjustment between us and our back-end partners. 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({
            [The '@']: resolve("./src")
        }),
        addPostcssPlugins([
            require("postcss-px-to-viewport") ({unitToConvert: 'px'.// The unit to convert, default is' px '
                viewportWidth: 750.// The viewport width of the design draft
                unitPrecision: 6.// The number of decimal places to keep after converting px to vw
                propList: [The '*'].// Those attributes can be converted to vw * for all
                viewportUnit: 'vw'.// Desired viewport unit // 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, using the original units such as PX
                minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
                mediaQuery: false.// Whether the unit in the media query needs to be converted
                replace: true.// Whether to replace the attribute value directly without adding the standby 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 criteria 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 the code
  • This is when we visit/apiThe request address is proxied to the interface at the beginninghttp://localhost:4444
  • 🌰 /api/testIt’s going to be represented byhttp://localhost:4444/test

Real machine problem

  • Let’s fix ours firstapp.jsandapp.scss
  • We added 50 P tags to the page for testing
    import { 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, {IDX} bar</p>))}<Button type="primary">button</Button>
        </div>
      );
    }

    export default App;
Copy the code
  • And then we clearpLabel margin
.p{
    color: red;
    width: 750px;
    margin: 0;
    padding: 0;
}
Copy the code
  • Then we connect the phone to the wifi of the computer, access the IP of the computer,
Input the ifconfigCopy the code

  • Then open it with your phonehttp://10.5.9.250:3000/, you can see our page

  • At this point, we see that the iphoneX button is blocked by a small black bar at the bottom
  • The solution
    • Add viewPort-fit =cover to the public/index.html mate tag <meta name="viewport" content="width=device-width, initial-scale=1,viewport-fit=cover" />
    • Body adds CSS like this
      body {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
Copy the code
  • Then we restart the project and look at it again on the real machine

  • The little black bar at the bottom won’t block the button

19. Complete code

  • package.json
{
  "name": "juejin-react-h5"."version": "0.1.0 from"."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 the 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 t-mobile subcontract
        fixBabelImports('import', {
            libraryName: 'antd-mobile'.style: 'css',})./ / lodash subcontract
        fixBabelImports("lodash", {
            libraryDirectory: "".camel2DashComponentName: false
        }),
        / / alias
        addWebpackAlias({
            [The '@']: 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")]}}); }}),/ / turn vw px
        addPostcssPlugins([
            require("postcss-px-to-viewport") ({unitToConvert: 'px'.// The unit to convert, default is' px '
                viewportWidth: 750.// The viewport width of the design draft
                unitPrecision: 6.// The number of decimal places to keep after converting px to vw
                propList: [The '*'].// Those attributes can be converted to vw * for all
                viewportUnit: 'vw'.// Desired viewport unit // 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, using the original units such as PX
                minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
                mediaQuery: false.// Whether the unit in the media query needs to be converted
                replace: true.// Whether to replace the attribute value directly without adding the standby 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 criteria based on 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 the code

20. Project AddressGithub.com/Tyf2345/jue…

reference

  • The iphone window problem developer.apple.com/design/huma…

Write in the last

  • When you see this, first of all you are a very persistent person, this article has no illustrations, it is all work, give yourself a thumbs up if you read it from beginning to end
  • React H5 react H5 react H5 react H5 React H5
  • You are welcome to comment and point out any imperfections