React Native：如何配置Webpack，我应该添加哪个加载器？

编程问答 2022-06-08

问题描述

我的React Native应用程序包含ReactXP库中的Video组件。我的应用程序没有很多代码，只有3个重要文件-> App.tsx，其中包含VideoContainer组件（VideoContainer.tsx），而VideoContainer包含VideoComponent（VideoComponent.tsx）。我的VideoComponent返回RX.Video组件。

这是我的问题，当我尝试使用“ npm run start：web”在网络上启动我的应用程序时，出现以下错误：

ERROR in ./Video/VideoContainer.tsx 5:28
Module parse Failed: Unexpected token (5:28)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import {VideoProps} from "./VideoPropsInterface"
|
> export const VideoContainer : React.FC<VideoProps> = ( {id,src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>
i ｢wdm｣: Failed to compile.
No type errors found

所以我在互联网上检查什么是加载程序，因为我是webpack的初学者，并且它存在不同的加载程序，例如文件加载程序，url加载程序，ts加载程序等。 但是我不知道我需要在项目中添加哪一个，我尝试了不同的加载程序，但是似乎没有人可以使用。

这是我的初始代码：

App.tsx 

import React,{ ReactElement } from 'react';
import RX from 'reactxp';

import {VideoContainer} from "../Video/VideoContainer";

const _styles = {
  main: RX.Styles.createViewStyle({
    justifyContent: 'center',alignItems: 'center',flex: 1,}),title: RX.Styles.createTextStyle({
    fontWeight: 'bold',fontSize: 36,textAlign: 'center',label: RX.Styles.createTextStyle({
    marginTop: 10,fontSize: 16,name: RX.Styles.createTextStyle({
    fontWeight: 'bold',color: '#42B74F',links: RX.Styles.createViewStyle({
    justifyContent: 'center',flexDirection: 'row',marginTop: 10,link: RX.Styles.createLinkStyle({
    marginRight: 5,marginLeft: 5,color: '#0070E0',};

export default class App extends RX.Component {

  constructor(props : any ){
    super(props);
  }
 
  public render(): ReactElement<RX.View> {
    return (
      
      
      <RX.View style={ _styles.main }>
        <VideoContainer id="videoPlayer" src={"http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"}></VideoContainer>
        <RX.View>
          <RX.Text style={ _styles.title }>Welcome to <RX.Text style={ _styles.name }>ReactXP</RX.Text></RX.Text>
          <RX.Text style={ _styles.label }>To get started,edit /src/App.tsx</RX.Text>
        </RX.View>

        <RX.View style={ _styles.links }>
          <RX.Link url={ 'https://github.com/Microsoft/reactxp' } style={ _styles.link }>GitHub</RX.Link>
          <RX.Link url={ 'https://microsoft.github.io/reactxp' } style={ _styles.link }>Docs</RX.Link>
          <RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/samples' } style={ _styles.link }>Samples</RX.Link>
          <RX.Link url={ 'https://github.com/Microsoft/reactxp/tree/master/extensions' } style={ _styles.link }>Extensions</RX.Link>
        </RX.View>
      </RX.View>
    );
  }

}

VideoContainer.tsx 

import {VideoComponent} from "./VideoComponent"
import React from "react"
import {VideoProps} from "./VideoPropsInterface"

export const VideoContainer : React.FC<VideoProps> = ( {id,src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>

VideoComponent.tsx 

import React from 'react';
import { View } from "react-native";
import Video from 'reactxp-video'
import {VideoProps} from "./VideoPropsInterface"

export const VideoComponent: React.FC<VideoProps>= ( {id,src} : VideoProps) => {
    return(
        <View nativeID={id}>
            <Video source={src} />
        </View>
        
    )
}

考虑的解决方案

我修改了VideoContainer.tsx代码，以检查问题是否来自打字稿。因此，我只是摘下了VideoComponent常量的React.FC类型。 这是新代码：

import {VideoComponent} from "./VideoComponent"
import React from "react"
import {VideoProps} from "./VideoPropsInterface"

export const VideoContainer = ( {id,src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>

现在我遇到了相同的错误，但是位置发生了变化：

ERROR in ./Video/VideoContainer.tsx 5:42
Module parse Failed: Unexpected token (5:42)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import {VideoProps} from "./VideoPropsInterface"
|
> export const VideoContainer = ( {id,src} : VideoProps ) => <VideoComponent id={id} src={src}></VideoComponent>
i ｢wdm｣: Failed to compile.

现在它是意外令牌（5:42），它对应于第二种VideoProps。所以我认为打字稿有问题，我想我需要添加ts-loader，但是一旦添加，就没有任何改变。

但是我不完全了解webpack的工作原理。我尝试在我的Web文件夹中创建一个webpack.config.js，并且还隐藏了web / webpack文件夹和根目录中的内容，但是没有任何变化。

这是我的 webpack.config.js 的内容：

const path = require('path');

module.exports = {
  entry: './src/index.ts',module: {
    rules: [
      {
        test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},],resolve: {
    extensions: [ '.tsx','.ts','.js' ],output: {
    filename: 'bundle.js',path: path.resolve(__dirname,'dist'),};

这是我的 package.json ：

{
  "name": "winversion","private": true,"main": "index.js","version": "0.0.1","scripts": {
    "rn-cli": "node scripts/react-native.js","start:android": "npm run rn-cli -- run-android","start:windows": "npm run rn-cli -- run-windows","start:ios": "npm run rn-cli -- run-ios","start:web": "cross-env platform=web webpack-dev-server --config=web/webpack/dev.js --progress --colors --mode=development","start:rn-dev-server": "npm run rn-cli -- start --reset-cache","build:web": "cross-env platform=web webpack --config=web/webpack/prod.js --progress --colors --mode=production","test": "jest -c jest/jest.config.js","test:watch": "npm run test -- --watch","test:debug": "node --inspect-brk node_modules/.bin/jest -c jest/jest.config.js --runInBand","build:types": "tsc --emitDeclarationOnly","type-check": "tsc --noEmit","type-check:watch": "npm run type-check -- -w","lint": "eslint --config .eslintrc --ext .ts,.tsx src"
  },"devDependencies": {
    "@babel/core": "7.10.2","@babel/plugin-proposal-decorators": "7.10.1","@babel/preset-env": "7.10.2","@babel/preset-react": "^7.12.1","@react-native-community/cli": "1.11.2","@types/enzyme": "3.10.5","@types/jest": "25.2.3","@types/react": "^16.9.52","@types/react-native": "^0.63.25","@typescript-eslint/eslint-plugin": "3.2.0","@typescript-eslint/parser": "3.2.0","babel-loader": "8.1.0","compression-webpack-plugin": "4.0.0","cross-env": "7.0.2","enzyme": "3.11.0","enzyme-adapter-react-16": "1.15.2","enzyme-to-json": "3.5.0","eslint": "6.1.0","eslint-loader": "4.0.2","eslint-plugin-jest": "23.13.2","eslint-plugin-react": "7.20.0","eslint-plugin-reactxp": "0.1.10","fork-ts-checker-webpack-plugin": "4.1.6","html-webpack-plugin": "^4.3.0","jest": "26.0.1","metro-react-native-babel-preset": "0.59.0","react-dom": "^16.13.1","react-native-typescript-transformer": "^1.2.13","react-native-web": "^0.14.1","rnpm-plugin-windows": "0.6.1","ts-loader": "^8.0.5","typescript": "^3.9.5","url-loader": "^4.1.1","webpack": "^4.43.0","webpack-cli": "^3.3.11","webpack-dev-server": "^3.11.0","webpack-merge": "4.2.2"
  },"dependencies": {
    "@types/react-native-video": "^5.0.3","babel-preset-es2015": "^6.24.1","oneplayerjs": "file:oneplayerjs-1.1.0.tgz","react": "16.13.1","react-native": "^0.59.10","react-native-video": "^5.1.0-alpha8","react-native-windows": "0.59.0-rc.3","reactxp": "2.0.0","reactxp-video": "^2.0.0"
  }
}

我的代码有什么问题？

感谢您的阅读：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-nativereact-nativereactxptypescripttypescripttypescriptwebpackwebpackwebpack