Быстро создавайте строительные леса на основе приложения create-реагировать от 0 до 1.

JavaScript React.js SCSS PostCSS
Быстро создавайте строительные леса на основе приложения create-реагировать от 0 до 1.

create-react-appЭто один из лучших инструментов разработки приложений React в отрасли.Эта статья проведет вас от 0 до 1, чтобы создать проект на основе create-реагировать-приложение.

Быстро создайте приложение React

npx create-react-app my-app     
cd my-app
npm start

Обратите внимание, что использование npx требует, чтобы ваш npm был выше 5.2.0, npx поможет вам выполнить двоичные файлы в зависимом пакете, и я не буду описывать его здесь; После завершения сборки

  • войти в каталог
  • Ввод командной строки npm start для запуска приложения
  • npm запустить сборку упакованного приложения

npm start

После входа в ваш проект вы увидите следующий каталог файлов

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

Элементы мобильной конфигурации

Здесь интересно то, что вы не видите конфигурацию webpack, поэтому перейдите в package.json и проверьте скрипт следующим образом:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Все команды инициируются через реагирующие сценарии, думаю,react-scriptsЭто пакет, перейдите в node_modules, чтобы найти его, и это правда;

react-scripts — это зависимость разработки, необходимая для сгенерированного проекта.Каталог выглядит следующим образом:

react-scripts
├── README.md
├── node_modules
├── package.json
├── bin
│   └──react-scripts.js
├── config
│   └── jest
│   └── env.js
│   └── paths.js
│   └──polyfills.js
│   └──webpack.config.dev.js
│   └──webpack.config.prod.js
│   └──webpackDevServer.config.js
└── scripts
    └── utils
       └──createJestConfig.js
    └── build.js
    └── eject.js
    └── init.js
    └── start.js
    └── test.js
    └── template

воплощать в жизнь

npm run eject

Вы увидите, что конфигурация реактивных скриптов размещена в корневом каталоге вашего проекта, и package.json также изменился соответствующим образом.

Так как мы хотим получить настраиваемую конфигурацию, поместите все плагины, необходимые для компиляции babel, в наш собственный проект отдельно; Создайте новый файл presets.js в корневом каталоге, просмотрите файлы в пакете babel-preset-react-app, поместите содержимое индексного файла в presets.js и поместите зависимости проекта в пакет babel-preset-react- пакет приложения в свой собственный проект Вниз Изменить config/jest/babelTransform.js

module.exports = babelJest.createTransformer({
  presets: [require.resolve('../presets.js')],
  babelrc: false,
});

На этом этапе, если вам нужно добавить какие-либо плагины, вы можете ввести их в файле presets.js.Например, я хочу использовать в проекте декоратор es7, поэтому я представил его. babel-plugin-transform-decorators-legacy

require.resolve('babel-plugin-transform-decorators-legacy')

И настроить его в .babelrc

{
    "presets": [
      "es2015",
      "react",
      "stage-0",
      "react-native-stage-0/decorator-support"
    ],
    "plugins": [
      "transform-decorators-legacy",
      "transform-runtime", ["import",{"libraryName":"antd","style":true}]
    ]
  }

Точно так же, если вам нужно ввести определенные полифиллы, их можно добавить в config/polyfills.js; Например, я добавил

require("babel-polyfill");
require("babel-register");

Выполните npm, чтобы попробовать Выше мы завершили перенос конфигурационного файла из react-scripts в наш собственный проект, не волнуйтесь, это только первый шаг;

Ниже мы начинаем нашу пользовательскую конфигурацию

Добавьте препроцессоры CSS (Sass, Less и т. д.)

Настраивайте по мере необходимости, здесь я добавил Sass; Во-первых, нам нужно сначала установить Sass

npm install --save node-sass-chokidar

Измените файл package.json.

"scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
     "eject": "node scripts/eject.js"
}

Нам нужно одновременно запускать watch-css и start.js при запуске, поэтому нам нужно установить пакет npm-run-all

npm install --save npm-run-all

Измените файл package.json.

     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "start-js": "node scripts/start.js",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "node scripts/build.js",
+    "build": "npm-run-all build-css build-js",

В настоящее время вы можете использовать файл scss для записи стилей в проекте.Например, мы переименовываем App.css в App.scss и используем синтаксис scss для записи стилей и выполнения команд.

npm start

Вы увидите, что скомпилированный файл css с тем же именем, что и файл scss, будет сгенерирован автоматически;

Post-Processing CSS

Вам не нужно делать никаких настроек, исходная конфигурация create-react-app уже сделала это за вас; Этот параметр сожмет ваш CSS и автоматически добавит к нему префиксы поставщиков через Autoprefixer, поэтому вам не придется беспокоиться о проблемах совместимости в разных браузерах.

добавить маршрутизатор

Сначала установите react-router-dom

npm install --save react-router-dom

Вот простой пример react-router-dom

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default BasicExample;

Конкретно оreact-router-domПожалуйста, обратитесь к официальному сайту для использования

Схема vw реализована в приложении create-реагировать

изменения конфигурации веб-пакета:

// 修改webpack配置
{
  loader: require.resolve('postcss-loader'),
  options: {
    config: {
      path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
    },
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/create-react-app/issues/2677
    ident: 'postcss'
    // plugins: () => [
    //   require('postcss-flexbugs-fixes'),
    //   autoprefixer({
    //     browsers: [
    //       '>1%',
    //       'last 4 versions',
    //       'Firefox ESR',
    //       'not ie < 9', // React doesn't support IE8 anyway
    //     ],
    //     flexbox: 'no-2009',
    //   }),
    // ],
  },
},

Создайте новый postcss.config.js в корневом каталоге.

module.exports = {
    "plugins": [
        require('postcss-flexbugs-fixes'),
        require("autoprefixer")({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
        }),
        require("postcss-aspect-ratio-mini"),
        require("postcss-write-svg")({ utf8: false }),
        require("postcss-cssnext")({
            features: {
                autoprefixer: false,
            }
        }),
        require("postcss-px-to-viewport")({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,
            mediaQuery: false
        }),
        require("postcss-viewport-units"),
        require("cssnano")({
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        })
    ]
}

В приведенной выше конфигурации postcss-px-to-viewport позволяет нам писать px как раньше.

Конфигурация viewportWidth и viewportHeight должна определяться в соответствии с проектом дизайна, предоставленным вашим пользовательским интерфейсом.

Плагин postcss-write-svg в основном использует изображение границы и фон для обработки, связанной с 1px. Например Начнем с написания границы в 1 пиксель.

@svg 1px-border {
  height: 2px; 
  @rect { 
    fill: var(--color, black); 
    width: 100%; 
    height: 50%; 
    } 
  }

Это можно использовать при необходимости

.example { 
  border: 1px solid transparent; 
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; 
  }

Конечно, есть также реализация background-image, для конкретной справки.postcss-write-svg

Установить плагин

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --D

В файле package.json:

"dependencies": {
   "cssnano": "^3.10.0", 
   "postcss-aspect-ratio-mini": "0.0.2", 
   "postcss-cssnext": "^3.1.0", 
   "postcss-px-to-viewport": "0.0.3", 
   "postcss-viewport-units": "^0.1.3", 
   "postcss-write-svg": "^3.0.1", 
   },

Примечание: autoprefixery один раз достаточно, чтобы изменить конфигурацию по умолчанию на false в cssnano и postcss-cssnext, иначе это повлияет на производительность.

Затем измените public/index.html. Есть три основных места

  1. IPonex адаптирован для изменения Meta Viewport Add Viewport-Fit = Cover
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">
  1. Введите ali cdn для viewport-units-buggyfill.hacks
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  1. Инициализировать метод инициализации выполнения ali cdn
<script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });

        var winDPI = window.devicePixelRatio;
            var uAgent = window.navigator.userAgent;
            var screenHeight = window.screen.height;
            var screenWidth = window.screen.width;
            var winWidth = window.innerWidth;
            var winHeight = window.innerHeight;
            console.log(
                "Windows DPI:" + winDPI +
                ";\ruAgent:" + uAgent +
                ";\rScreen Width:" + screenWidth +
                ";\rScreen Height:" + screenHeight +
                ";\rWindow Width:" + winWidth +
                ";\rWindow Height:" + winHeight
            )
      }
</script>

Кроме того, вы также можете взломать возможные проблемы совместимости iphoneX с помощью медиа-запросов. код показывает, как показано ниже:

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   /* iPhone X 独有样式写在这里*/ 
   
}

Внедрите antd с настраиваемыми темами конфигурации

Если вашему проекту необходимо импортировать antd, см.здесь

Установите react-app-rewired, чтобы переписать конфигурацию

npm i react-app-rewired --dev

Загрузка по запросу с помощью babel-plugin-import

npm i babel-plugin-import --dev

Используйте функцию react-app-rewire-less, чтобы настроить тему с меньшими возможностями переопределения.

npm i react-app-rewire-less --dev

На официальном сайте antd нам нужно настроить скрипты в package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

Но мы больше не используем react-scripts, а используем нашу собственную конфигурацию, так что давайте посмотрим, что делает react-app-rewired // Здесь я прочитал код react-app-rewired и сделал некоторую обработку Что касается использования, вам нужно только создать config-overrides.js в корневом каталоге проекта, чтобы изменить конфигурацию по умолчанию.

следующим образом

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

 module.exports = function override(config, env) {
 config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
 config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
 config = rewireLess.withLoaderOptions({
   modifyVars: { "@primary-color": "#1DA57A" },
 })(config, env);
   return config;
 };

Добавьте в start.js и build.js скрипта:

// 自定义配置
  const overrides = require('../config-overrides');
  const webpackConfig = require('../config/webpack.config.dev');
  require.cache[require.resolve('../config/webpackDevServer.config.js')].exports =
    overrides(webpackConfig, process.env.NODE_ENV);

Если есть проблема в установке, рекомендуется использовать пряжу для ее решения.

Для конкретных примеров, пожалуйста, обратитесь к моему github, добро пожаловать на обмен исправлениямиreact-cli

Категории