Привет,
У меня есть проект для Интернета с использованием react и для нативного использования с react-native, и я поделился некоторым кодом.
react-native работает, но веб-версия не работает в той же кодовой базе, если я удалю код и библиотеки react-native, веб-версия будет работать.
Я думаю, что проблема в конфигурации webpack, я много пробовал версии, но не работает.
Для запуска сервера в Интернете я использую:
"webpack-dev-server --content-base dist/ --config webpack/web.dev.config.js --port 3000 --inline --hot --colors --historyApiFallback",
Мой файл конфигурации webpack:
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer')
const extractLess = new ExtractTextPlugin('css/style_webpack.css')
module.exports = {
devtool: 'eval',
entry: [path.resolve(__dirname, '../src/web/index')],
cache: true,
output: {
path: path.join(__dirname, '../dist'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: [
'transform-object-rest-spread',
'transform-class-properties',
],
presets: ['es2015', 'react', 'stage-0'],
},
include: path.resolve(__dirname, '../src')
},
{
test: /\.less$/i,
loader: extractLess.extract([
{
loader: 'raw-loader',
options: {
minimize: false,
sourceMap: false,
},
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [autoprefixer('>1%', 'ie 10')]
},
},
},
{
loader: 'less-loader',
options: {
strictMath: false,
noIeCompat: true,
},
},
]),
},
],
},
plugins: [
extractLess,
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
PLATFORM_ENV: JSON.stringify('web'),
},
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
}
И ошибок, несколько из них:
ERROR in ./~/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AppRegistry' in 'E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native\Libraries\react-native'
@ ./~/react-native/Libraries/react-native/react-native-implementation.js 69:29-51
@ ./src/native/routes/appNavigator.js
@ ./src/reducers/nav/nav.js
@ ./src/reducers/index.js
@ ./src/configureStore.js
@ ./src/web/index.js
@ multi ./src/web/index
ERROR in ./~/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AppState' in 'E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native\Libraries\react-native'
@ ./~/react-native/Libraries/react-native/react-native-implementation.js 70:26-45
@ ./src/native/routes/appNavigator.js
@ ./src/reducers/nav/nav.js
@ ./src/reducers/index.js
@ ./src/configureStore.js
@ ./src/web/index.js
@ multi ./src/web/index
ERROR in ./~/react-native-elements/src/searchbar/SearchBar.js
Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\searchbar\SearchBar.js Unexpected token (14:8)
You may need an appropriate loader to handle this file type.
|
| class SearchBar extends Component {
| focus = () => {
| this.searchbar.focus();
| };
@ ./~/react-native-elements/src/index.js 16:0-46
@ ./src/native/routes/appNavigator.js
@ ./src/reducers/nav/nav.js
@ ./src/reducers/index.js
@ ./src/configureStore.js
@ ./src/web/index.js
@ multi ./src/web/index
ERROR in ./~/react-native-elements/src/card/Card.js
Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\card\Card.js Unexpected token (37:4)
You may need an appropriate loader to handle this file type.
| fontFamily,
| imageProps,
| ...attributes
| } = props;
|
@ ./~/react-native-elements/src/index.js 24:0-31
@ ./src/native/routes/appNavigator.js
@ ./src/reducers/nav/nav.js
@ ./src/reducers/index.js
@ ./src/configureStore.js
@ ./src/web/index.js
@ multi ./src/web/index
ERROR in ./~/react-native-elements/src/checkbox/CheckBox.js
Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\checkbox\CheckBox.js Unexpected token (29:4)
You may need an appropriate loader to handle this file type.
| checkedTitle,
| fontFamily,
| ...attributes
| } = props;
|
@ ./~/react-native-elements/src/index.js 18:0-43
@ ./src/native/routes/appNavigator.js
@ ./src/reducers/nav/nav.js
@ ./src/reducers/index.js
@ ./src/configureStore.js
@ ./src/web/index.js
@ multi ./src/web/index
@Cherniv tank для предложения, для этого проекта не подходит, потому что веб-часть завершена на 99%, если я не найду решение, я разобью их.
Я бы порекомендовал их разорвать. Я предполагаю, что код, которым вы делитесь, имеет отношение к логике, а не к рендерингу, это правильно? Если да, то почему бы не извлечь его в библиотеку? Таким образом, вы можете повторно использовать его в нескольких проектах.





Если вы используете один и тот же код в двух проектах, то связующим звеном является то, что вы используете ReactJS в обоих. Это означает, что вы можете взять код и создать общие классы Modular Service / Util, которые можно импортировать в оба.
Учтите следующее:
У меня есть пользовательский вызов api как в приложениях ReactJS, так и в React Native. Я создаю модуль User Service, который обрабатывает это за меня (написанный на JavaScript) с помощью только необходимого импорта ядра. Затем я импортирую эту службу в свои собственные приложения для реагирования и реагирования.
Зачем вам разбивать приложение? Вы разделили код, отделили общий код и разбили его на модули. Трудно сказать, не видя вашего кода.
Рассмотрите возможность использования github.com/necolas/react-native-web