Слияние кода завершено, страница обновится автоматически
Основываясь на react-weui, строим реактивный каркас разработки
Недавно я просмотрел множество статей и обнаружил, что в них нет хорошего объяснения того, как создать среду React и использовать react-weui. Также не было информации о том, на что следует обратить внимание при использовании webpack для сборки и запуска. Ниже я представляю подробное руководство по созданию каркаса разработки с использованием версии react-weui 1.1.3.
1. Скачиваем исходный код с GitHub Скачиваем с GitHub: https://github.com/weui/react-weui Можно использовать git clone или скачать zip-архив.
package.json — файл, в котором описаны шаги редактирования и запуска; webpack.config.js — конфигурационный файл webpack для сборки; webpack.config.doc.js — конфигурационный файл webpack (doc) для сборки.
2. Открываем IDE и создаём проект В качестве IDE используем WebStorm, а в качестве командной строки — cmder.
WebStorm: https://www.jetbrains.com/webstorm/ cmder: http://cmder.net/
3. Инициализируем проект и добавляем npm-пакеты Здесь мы используем cnpm вместо npm.
Зеркало NPM Taobao: https://npm.taobao.org/
Вы можете использовать наш инструмент командной строки cnpm (с поддержкой сжатия gzip), чтобы заменить стандартный npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Установка внутренних npm-пакетов проекта:
cnpm install
Установка связанных npm-пакетов:
cnpm install --save weui@1.1.0 react-weui
# Здесь необходимо указать версию webpack, так как использование webpack автоматически установит webpack4, что может вызвать проблемы с версией позже*
cnpm install --save webpack@3
# В настоящее время версия всё ещё 2.x, но всё равно укажите её*
cnpm install --save webpack-dev-server@2
cnpm install --save autoprefixer
cnpm install --save html-webpack-plugin
cnpm install --save extract-text-webpack-plugin
cnmp install --save open-browser-webpack-plugin
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
4. Компилируем и упаковываем Мы не используем предоставленный build-скрипт, а создаём свой на основе webpack.
Открываем webpack.js, добавляем в script следующий код:
"start:example": "webpack-dev-server --config webpack.config.js --inline --progress --colors --port 8080",```
Запускаем скрипт:
```cnpm run build:example```
Однако вы обнаружите ошибку: Module not found (js).
Эта проблема связана с тем, что webpack не находит модуль. При использовании webpack для упаковки возникает эта проблема. Нам нужно глобально найти ../../../build/packages и изменить его на react-weui.
Пример изменения файла:
Строка 5 изменяется следующим образом:
Файл содержит много строк, поэтому необходимо терпеливо искать и изменять их одну за другой.
Ещё одна ошибка: Module not found (css).
Откройте файл example/app.js и измените строку 15: import 'react-weui/build/packages/react-weui.css';
После изменения всех файлов запустите снова:
```cnpm run build:example```
Всё готово!
**5. Запускаем пример проекта**
```cnpm run start:example```
Завершено, откройте браузер:
[http://127.0.0.1:3000/](http://127.0.0.1:3000/)
**6. Создаём и запускаем пример проекта doc**
Поскольку в package.json есть скрипт start:doc, нам нужно только добавить:
```"build:doc": "webpack --config webpack.config.doc.js --progress --colors -p"```
Теперь запустите:
```cnpm run build:doc```
Если появится сообщение об ошибке ../../build/packages, измените его на react-weui **Текст запроса:**
eval(compiledCode).apply(null, tempScope); } /* eslint-enable no-eval, max-len */
this.setState({ error: null });
} catch (err) {
this._setTimeout(() => {
this.setState({ error: err.toString() });
}, 500);
}
};
componentDidMount = () => { this._executeCode(); };
componentDidUpdate = (prevProps) => { clearTimeout(this.timeoutID); //eslint-disable-line if (this.props.code !== prevProps.code) { this._executeCode(); } };
render() { const { error } = this.state; return (
}
export default Preview;
**Перевод текста на русский язык:**
eval (compiledCode) .apply (null, tempScope); } /* eslint-enable no-eval, max-len */
this.setState ({error: null}); } catch (ошибка) { this._setTimeout (() => { this.setState ({ошибка: ошибка.toString ()}); }, 500); } };
componentDidMount = () => { this._executeCode (); };
componentDidUpdate = (prevProps) => { clearTimeout (this.timeoutID); // eslint-disable-line if (this.props.code! == prevProps.code) { this._executeCode (); } };
render () { const {error} = this.state; return (
}
экспорт по умолчанию Предварительный просмотр;
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )