我最近更新了我的 react-native-web 项目以使用更新的 react native 版本来使用更新的 expo 版本。
在 npm 的帮助下，我现在在 ios 和 android 上运行了一个功能齐全的更新代码。
但是，我仍然很难在 webpack 上运行它，并且存在与需要更新到更高版本（2 -> 3or4）的 webpack 相关的不同问题（据我所知）。
在这个过程中，我发现很难将正确的 webpack 版本与正确的 dev-server 和 cli 匹配。
这是我的 package.json
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-expo-web": "^0.0.5",
"babel-plugin-react-native-web": "0.9.9",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-runtime": "6.23.0",
"css-loader": "0.28.7",
"docz": "^0.12.16",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.7",
"gh-pages": "^1.2.0",
"jest-expo": "^30.0.0",
"react-native-scripts": "^2.0.1",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "16.4.1",
"style-loader": "^0.19.0",
"sw-precache-webpack-plugin": "^0.11.5",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry-web.js",
"scripts": {
"start": "expo start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest",
"clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
"make": "yarn",
"docu:dev": "docz dev",
"docu:build": "docz build",
"web": "webpack-dev-server -d --config ./webpack.config.js --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
"build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
"build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@sentry/browser": "^4.4.1",
"@sentry/cli": "^1.31.0",
"audit": "0.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"es6-symbol": "^3.1.1",
"expo": "^30.0.0",
"expo-analytics": "1.0.7",
"expo-firebase-crashlytics": "1.0.0",
"expo-web": "0.0.14",
"firebase": "^5.0.4",
"jsc-android": "^224109.1.0",
"mobx": "4",
"mobx-react": "5.1.0",
"npm": "^6.5.0",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "16.5.1",
"react-art": "16.5.1",
"react-css-blur": "^1.1.1",
"react-dom": "^16.5.1",
"react-markdown": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react-native-camera-roll-picker": "^1.2.3",
"react-native-dialog": "^5.4.0",
"react-native-simple-markdown": "^1.1.0",
"react-native-web": "0.9.0",
"react-native-web-svg": "1.0.0",
"react-navigation": "~2.3.1",
"sentry-expo": "^1.11.0",
"sweetalert": "2.1.2",
"uglifyjs-webpack-plugin": "1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.1.10",
"ws": "^6.0.0"
}
现在我想知道并理解我应该在网络方面进行哪些更改，以使我的 yarn run 网络脚本再次工作，基本上。
//web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const appDirectory = path.resolve(__dirname, "./");
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// 'node_module'.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-navigation"),
path.resolve(appDirectory, "node_modules/react-native-tab-view"),
path.resolve(appDirectory, "node_modules/react-native-paper"),
path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
path.resolve(appDirectory, "node_modules/react-native-safe-area-view"),
path.resolve(appDirectory, "node_modules/@expo/samples"),
path.resolve(appDirectory, "node_modules/@expo/vector-icons"),
path.resolve(appDirectory, "node_modules/react-native-platform-touchable"),
],
use: {
loader: "babel-loader",
options: {
// cacheDirectory: false,
babelrc: false,
sourceMaps: true,
// minimize: false,
// Babel configuration (or use .babelrc)
// This aliases 'react-native' to 'react-native-web' and includes only
// the modules needed by the app.
plugins: [
"expo-web",
"react-native-web",
"transform-decorators-legacy",
["transform-runtime", { helpers: true, polyfill: true, regenerator: true }],
],
// The 'react-native' preset is recommended to match React Native's packager
presets: ["react-native"],
},
},
};
// This is needed for loading css
const cssLoaderConfiguration = {
test: /\.css$/,
use: ["style-loader", "css-loader"],
};
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
},
},
};
const ttfLoaderConfiguration = {
test: /\.ttf$/,
use: [
{
loader: "file-loader",
options: {
name: "./fonts/[hash].[ext]",
},
},
],
include: [
path.resolve(appDirectory, "./src/assets/fonts"),
path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
],
};
module.exports = {
// your web-specific entry file
entry: path.resolve(appDirectory, "src/index.js"),
devtool: "#eval-source-map",
// mode: 'development',
// configures where the build ends up
output: {
filename: "bundle.js",
publicPath: "/assets/",
path: path.resolve(appDirectory, "./app/assets"),
},
module: {
rules: [
babelLoaderConfiguration,
cssLoaderConfiguration,
imageLoaderConfiguration,
ttfLoaderConfiguration,
],
},
plugins: [
// process.env.NODE_ENV === 'production' must be true for production
// builds to eliminate development checks and reduce build size. You may
// wish to include additional optimizations.
// https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/206#issuecomment-358015555
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"), //JSON.stringify("production")
__DEV__: process.env.NODE_ENV === "production" || true,
}),
],
resolve: {
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// '.web.js'.
symlinks: false,
extensions: [".web.js", ".js", ".json"],
alias: {
"./assets/images/expo-icon.png": "./assets/images/expo-icon@2x.png",
"./assets/images/slack-icon.png": "./assets/images/slack-icon@2x.png",
"@expo/vector-icons": "expo-web",
expo: "expo-web",
"react-native$": "react-native-web",
'react-native-svg$': 'react-native-web-svg',
"babel-runtime/regenerator": require.resolve("babel-runtime/regenerator"),
},
},
};谢谢大家。