如何配置带有Shebang Loader的Webpack忽略Hashbang将Cesium React组件导入Typescript React组件

How to Configure Webpack with Shebang Loader to Ignore Hashbang Importing Cesium React Component into Typescript React Component

我正在尝试创建一个故事书测试，该测试在使用 typescript、babel 和 webpack 的模块中使用 react 组件。 我的地图 react 组件引用并使用了 cesium 和 cesium-react 组件。

当我尝试 运行 启动故事书（纱线故事书）时出现错误：

ERROR in ./node_modules/requirejs/bin/r.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
|  * @license r.js 2.3.5 Copyright jQuery Foundation and other contributors.
@ ./node_modules/cesium/index.js 5:16-36
@ ./node_modules/cesium-react/dist/cesium-react.es.js
@ ./src/components/Map.js
@ ./stories/map.stories.js
@ ./stories .stories.(ts?x|js)$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=

如果我google这个错误'Module parse failed. Unexpected character '#'。 #4603' 我在结果列表的顶部看到了类似的问题，建议尝试一些事情。

我的主要问题具体是：

  1. 我曾尝试使用自定义加载器和 shebang 加载器（参考 2168），但似乎都不起作用。甚至可以在故事书中解决此错误和 运行 吗？关于 JSONstream 的研究表明使用 shebang 加载器可以解决问题，但我只是没有正确配置。
  2. 假设 shebang loader 是推荐的可能解决方案中最好的，那么我在 .storybook/webpack.config.js 中可能做错了什么（显然我正在做的是行不通的）。

我应该注意：

以下是我认为相关文件的片段，但如果有人询问，我很乐意 post 其他文件或片段。

我不知道你的 webpack 配置，这对我来说很奇怪，我以前不喜欢它，但实际上你需要 shebang-loader 所以如果你使用 npm 运行:

npm install --save shebang-loader

如果你使用 yarn 那么 运行:

yarn add shebang-loader

之后你必须把 use 键放在你的加载器中，并在其中加载多个加载器，我猜你的代码如下所示：

    const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
    module.exports = (baseConfig, env) => {
      const config = genDefaultConfig(baseConfig, env);
      config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
               loader: require.resolve('ts-loader')
            },
            {
               loader: 'shebang-loader'
            }
        ]
      });
      // Add shebang to try to workaround unexpected character error.
      config.module.rules.push({
        test: /node_modules\/cesium\/index\.js$/,
        loader: require.resolve('shebang-loader')
      });
      config.resolve.extensions.push('.ts', '.tsx');
      return config;
    };

在我的例子中，它变成了下面这样：

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules\/)/,
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: 'shebang-loader'
                    }
                ]
            }
       ]
    }

希望对你有帮助。

我创建这个 webpack.config.js 是为了自己解决这个问题：

   var path = require('path');


module.exports = {
  entry: './src/root.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
module: {
   loaders: [
     {
       test:  /\.js$/,
       loader: 'shebang-loader'
     }
   ]
 }
}