reactjs - 使用静态关键字的合适的 webpack 加载器是什么？

Question

当我尝试启动我的 react-styleguidist 文档时出现以下错误：

./node_modules/react-native-gesture-handler/touchables/TouchableHighlight.js 10:22
Module parse failed: Unexpected token (10:22)
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
|  */
| export default class TouchableHighlight extends Component {
>   static defaultProps = {
|     ...GenericTouchable.defaultProps,
|     activeOpacity: 0.85,
 @ ./node_modules/react-native-gesture-handler/touchables/index.js 6:0-69 6:0-69
 @ ./node_modules/react-native-gesture-handler/index.js

我的webpack.config.js样子是这样的：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  return config;
};

我的babel.config.js样子是这样的：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      development: {
        plugins: [
          '@babel/plugin-transform-react-jsx-source',
        ],
      },
    },
  };
};

再生产：

git clone https://github.com/kopax/expo-bug-reports.git
cd expo-bug-reports
git checkout react-styleguidist
npm i
npm run styleguide

static使用关键字的合适的 Webpack 加载器是什么？

Answer 1

如果你使用 webpack 构建你的项目，那么你需要将 babel-loader 添加到 webpack。

module: {
        rules: [{
            test: /\.(j|t)sx?$/,
            exclude: [/node_modules/],
            use: [{
                loader: "babel-loader",
                options: {
                    presets: ['babel-preset-expo'],
                    env: {
                      development: {
                        plugins: [
                          '@babel/plugin-transform-react-jsx-source',
                        ],
                      },
                    },
                }
            }]
        },
}