本文介绍了如何使用 Shebang Loader 配置 Webpack 以忽略 Hashbang 将 Cesium React 组件导入 Typescript React 组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am attempting to create a storybook test that uses a react component in a module that uses typescript, babel, and webpack.My Map react component references and uses cesium and cesium-react components.

当我尝试运行 start-storybook(纱线故事书)时出现错误:

When I try to run start-storybook (yarn storybook) I get an error:

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=

如果我用谷歌搜索这个错误模块解析失败.意外字符#".#4603' 我在结果列表的顶部看到类似的问题,建议尝试一些事情.

If I google this error 'Module parse failed. Unexpected character '#'. #4603' I see similar issues at the top of the result list that suggests a few things to try.

  • 添加自定义加载器(参考 4603)
  • 尝试使用 shebang 加载程序(参考 4603/531)
  • 干脆不要测试(参考文献 170)
  • 此外,其中一个链接到 jsonstream 的一个非常相似的错误,可以通过谷歌搜索节点目标应该忽略 hashbang #2168"找到

我的主要问题是:

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

我应该注意:

  • 如果我不尝试使用 typescript 加载器,我可以使用 storybook 来运行我的 Map 组件.如果我将我的 Map 故事添加到 github 的 cesium-react 项目的副本中,我就可以运行它.
  • 此处显示的我的 Map 组件已尽可能简化,以便尝试识别和解决我的导入问题.但是,目的是使用 Typescript 实现我的实际 Map 组件.

以下是我认为相关文件的片段,但如果被问到,我很乐意发布其他文件或片段.

Here are snippets of what I think are relevant files but would happily post other files or snippets if asked.

  • .storybook/webpack.config.js

  • .storybook/webpack.config.js

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)$/,
    loader: require.resolve('ts-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;
};

  • .storybook/config.js

  • .storybook/config.js

    import { configure } from '@storybook/react';
    
    // automatically import all files ending in *.stories.js or *.stories.ts?x
    const req = require.context('../stories', true, /.stories.(ts?x|js)$/);
    
    //interates through all files in ../stories that match the regex above
    //and adds them to list of stories to show
    function loadStories() {
      req.keys().forEach((filename) => req(filename));
    }
    
    configure(loadStories, module);
    

  • stories/map.stories.js

  • stories/map.stories.js

    import * as React from 'react';
    import Map from "../src/components/Map";
    import { withInfo } from '@storybook/addon-info';
    import { storiesOf } from '@storybook/react';
    storiesOf("Map", module)
      .add('Sample Map',
        withInfo('Map Stuff')(() =>
          <Map />
      ));
    

  • src/components/Map.js.如果我在 Map.js 中取消注释我的 cesium-react 导入,则会发生错误.

  • src/components/Map.js. The error will occur if I uncomment my cesium-react import in Map.js.

    import * as React from 'react';
    // Uncomment to see unexpected character error.
    import { Viewer } from "cesium-react";
    export default class Map extends React.Component {
      render() {
        return (
          <div>hello</div>
        );
      }
    }
    

  • package.json(片段,如果需要,我可以提供更多文件)

  • package.json (snippet, I can provide more of the file if deemed necessary)

    "scripts": {
      "test": "jest",
      "test:watch": "jest --watch",
      "test:coverage": "jest --coverage",
      "test:ci":"jest --ci --testResultsProcessor='jest-junit'",
      "build": "webpack",
      "build:prod": "cross-env NODE_ENV=production webpack -p",
      "clean": "yarn clean:storybook-static && yarn clean:build && yarn clean:docs && yarn clean:node_modules",
      "clean:node_modules": "node ./utility/rimraf-standalone.js node_modules",
      "clean:build": "rimraf build",
      "clean:storybook-static": "rimraf storybook-static",
      "clean:docs": "rimraf docs",
      "storybook": "start-storybook -p 6006",
      "build-storybook": "build-storybook",
      "pre:publish": "yarn lint && yarn test && yarn build:prod",
      "lint": "tslint -c config/tslint.json '/src/**/*.{ts,tsx}'",
      "generate:docs": "typedoc --out ./docs ./src/index.tsx"
    },
    "devDependencies": {
      "@types/enzyme": "^3.1.6",
      "@types/jest": "^22.0.1",
      "@types/react": "^16.0.34",
      "@types/react-dom": "^16.0.3",
      "@types/react-test-renderer": "^16.0.0",
      "@types/storybook__addon-info": "^3.2.1",
      "@types/storybook__react": "^3.0.6",
      "@babel/core": "^7.0.0-beta.37",
      "@babel/plugin-proposal-class-properties": "^7.0.0-beta.37",
      "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.37",
      "@babel/plugin-proposal-export-namespace-from": "^7.0.0-beta.37",
      "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.37",
      "@babel/preset-env": "^7.0.0-beta.37",
      "@babel/preset-react": "^7.0.0-beta.37",
      "@storybook/addon-actions": "^3.4.0-alpha.1",
      "@storybook/addon-info": "^3.3.8",
      "@storybook/addon-links": "^3.4.0-alpha.1",
      "@storybook/addon-storyshots": "^3.3.8",
      "@storybook/react": "^3.4.0-alpha.1",
      "babel-core": "^7.0.0-beta.37",
      "babel-eslint": "^8.2.1",
      "babel-loader": "^8.0.0-beta.0",
      "babel-plugin-istanbul": "^4.1.5",
      "cesium": "^1.41.0",
      "cesium-react": "^0.2.0",
      "classnames": "^2.2.5",
      "copy-webpack-plugin": "^4.3.1",
      "cross-env": "^5.1.3",
      "css-loader": "^0.28.8",
      "del-cli": "^1.1.0",
      "eslint": "^4.15.0",
      "eslint-config-prettier": "^2.9.0",
      "eslint-import-resolver-webpack": "^0.8.4",
      "eslint-plugin-babel": "^4.1.2",
      "eslint-plugin-import": "^2.8.0",
      "eslint-plugin-node": "^5.2.1",
      "eslint-plugin-react": "^7.5.1",
      "extract-text-webpack-plugin": "^3.0.2",
      "html-webpack-include-assets-plugin": "^1.0.2",
      "html-webpack-plugin": "^2.30.1",
      "jasmine-core": "^2.8.0",
      "karma": "^2.0.0",
      "karma-chrome-launcher": "^2.2.0",
      "karma-cli": "^1.0.1",
      "karma-coverage": "^1.1.1",
      "karma-jasmine": "^1.1.1",
      "karma-rollup-preprocessor": "^5.1.1",
      "karma-source-map-support": "^1.2.0",
      "npm-run-all": "^4.1.2",
      "optimize-css-assets-webpack-plugin": "^3.2.0",
      "prettier": "^1.10.2",
      "prettier-eslint": "^8.8.1",
      "prettier-eslint-cli": "^4.7.0",
      "prop-types": "^15.6.0",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "react-hot-loader": "^3.1.3",
      "react-router-dom": "^4.2.2",
      "rollup": "^0.54.0",
      "rollup-plugin-babel": "^4.0.0-beta.0",
      "rollup-plugin-commonjs": "^8.2.6",
      "rollup-plugin-node-resolve": "^3.0.2",
      "rollup-plugin-replace": "^2.0.0",
      "rollup-plugin-uglify": "^2.0.1",
      "storybook-addon-jsx": "^5.3.0",
      "style-loader": "^0.19.1",
      "uglify-es": "^3.3.5",
      "webpack": "^3.10.0",
      "webpack-dev-server": "^2.10.1",
      "ts-jest": "^22.0.1",
      "ts-loader": "^3.2.0",
      "tslint": "^5.9.1",
      "tslint-config-airbnb": "^5.4.2",
      "tslint-react": "^3.4.0",
      "typedoc": "^0.9.0",
      "typescript": "^2.6.2",
      "url-loader": "^0.6.2",
      "shebang-loader": "^0.0.1"
    },
    "dependencies": {
      "react": "^16.2.0",
      "react-dom": "^16.2.0"
    }
    

  • 推荐答案

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

    I don't know your webpack configuration, it is weird for me and I didn't see like it before, but actually you need shebang-loader so if you using npm run:

    npm install --save shebang-loader
    

    如果你使用yarn,那么运行:

    And if you use yarn so run:

    yarn add shebang-loader
    

    之后你必须把 use 键放在你的加载器中并在里面加载几个加载器,我猜你的代码变成如下:

    After it you must put use key in your loader and load several loader inside it, I guess your code become like below:

        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;
        };
    

    就我而言,它变成了如下所示:

    In my case it became like below:

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

    希望对你有帮助.

    这篇关于如何使用 Shebang Loader 配置 Webpack 以忽略 Hashbang 将 Cesium React 组件导入 Typescript React 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    阿里云证书,YYDS!

    05-22 10:41