我正在尝试创建一个故事书测试，该测试在使用 typescript、babel 和 webpack 的模块中使用 react 组件。My Map react 组件引用并使用 cesium 和 cesium-react 组件。
当我尝试运行 start-storybook (yarn storybook) 时出现错误：
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' 我在结果列表顶部看到类似的问题，建议尝试一些事情。
- 添加自定义加载程序（参考 4603）
- 尝试使用 shebang loader（参考 4603/531）
- 根本不测试（参考 170）
- 此外，其中一个链接到 jsonstream 的一个非常相似的错误，可以通过谷歌搜索“node target should ignore hashbang #2168”找到
我的主要问题是：
- 我曾尝试使用自定义加载程序和 shebang 加载程序（参考 2168），但似乎都不起作用。甚至可以解决这个错误并在故事书中运行吗？关于 JSONstream 的研究表明，使用 shebang 加载程序可以解决问题，而我只是没有正确配置。
- 假设 shebang loader 是推荐的可能解决方案中最好的，那么我在 .storybook/webpack.config.js 中可能做错了什么（显然我正在做的事情不起作用）。
我应该注意到：
- 如果我不尝试使用打字稿加载器，我可以获得故事书来运行我的地图组件。如果我将 Map 故事添加到来自 github 的 cesium-react 项目的副本，我可以运行它。
- 此处显示的我的地图组件已尽可能简化，以便尝试识别和解决我的导入问题。但是，目的是我的实际 Map 组件将使用 Typescript 实现。
以下是我认为相关文件的片段，但如果被问到，我很乐意发布其他文件或片段。
.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
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);故事/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 /> ));源代码/组件/Map.js。如果我在 Map.js 中取消注释我的 cesium-react 导入，则会发生错误。
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（片段，如果认为有必要，我可以提供更多文件）
"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" }