导入的脚本不能用 Babel 编译

Question

我正在努力将外部脚本集成到我的 ReactJS 应用程序中。

我们假设这个外部脚本叫做 myScript.js。我很确定这个细节无关紧要，但这个脚本是使用 Js_of_ocaml.

从 OCaml 字节码生成的

myScript.js 在使用 node 执行时按预期工作，即

$ node myScript.js

但是，当我使用 require 或 import 将此文件导入我的 ReactJS 应用程序并使用

执行我的应用程序时

$ npm start

没有成功。

ERROR in ./src/myScript.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Projects/myProject/src/myScript.js: Line must be greater than or equal to 1, got 0
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/Projects/myProject/node_modules/source-map/lib/source-map-consumer.js:539:13)
    at BasicSourceMapConsumer.SourceMapConsumer_allGeneratedPositionsFor [as allGeneratedPositionsFor] (/Projects/myProject/node_modules/source-map/lib/source-map-consumer.js:201:22)
    at /Projects/myProject/node_modules/@babel/core/lib/transformation/file/merge-map.js:184:27
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Projects/myProject/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at buildMappingData (/Projects/myProject/node_modules/@babel/core/lib/transformation/file/merge-map.js:145:12)
    at mergeSourceMap (/Projects/myProject/node_modules/@babel/core/lib/transformation/file/merge-map.js:19:17)
    at generateCode (/Projects/myProject/node_modules/@babel/core/lib/transformation/file/generate.js:72:39)
    at run (/Projects/myProject/node_modules/@babel/core/lib/transformation/index.js:53:33)
    at run.next (<anonymous>)
 @ ./src/TimeGrid.js 15:18-60
 @ ./src/App.js 16:0-34 188:45-53
 @ ./src/index.js 7:0-24 11:33-36

ERROR in src/myScript.js
  Line 1026:29:   Expected an assignment or function call and instead saw an expression
no-unused-expressions
  Line 2033:15:   React Hook "useKaratsuba" is called in function "BigInteger.prototype.multiply" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks
  Line 2558:29:   Expected an assignment or function call and instead saw an expression                                                                                                                                                                                                    
no-unused-expressions
  Line 4269:7:    Expected an assignment or function call and instead saw an expression                                                                                                                                                                                                    
no-unused-expressions
  Line 30953:17:  Unexpected use of 'event'                                                                                                                                                                                                                                                
no-restricted-globals
  Line 30963:26:  Unexpected use of 'event'                                                                                                                                                                                                                                                
no-restricted-globals

Search for the keywords to learn more about each error.

webpack 5.66.0 compiled with 2 errors and 2 warnings in 118769 ms

我不是专家，但考虑到我使用 create-react-app 设置了此应用程序，并且脚本与 node 一起工作得很好，我假设 webpack 或babel 正在编译脚本，这可能就是出现错误的原因。因此，我尝试通过使用配置文件将 myScript.js 排除在 babel 和 webpack 之外来避免转译，如 Babel exclude and Module Rule.exclude.

中所述

我知道自从我使用 create-react-app 设置应用程序后，我需要运行 npm eject 或以某种方式覆盖默认配置。为了在不弹出应用程序的情况下实现这一点，我使用 customize-cra。首先，我尝试将其从 babel:

中排除

const { override, babelExclude, addBabelPresets } = require('customize-cra')
const path = require('path');

module.exports = override(
  babelExclude([path.resolve("./src/myScript.js")]),
  addBabelPresets(["@babel/env", { modules: false }])
);

不幸的是，错误仍然存在。随后，我尝试将排除规则添加到 webpack:

const { override, babelExclude, addBabelPresets, addWebpackModuleRule } = require('customize-cra')
const path = require('path');

module.exports = override(
  babelExclude([path.resolve("./src/myScript.js")]),
  addBabelPresets(["@babel/env", { modules: false }]),
  addWebpackModuleRule({ exclude: path.resolve("./src/myScript.js") })
);

但这显然完全禁用了所有文件的转译步骤：

ERROR in ./src/index.js 10:2
Module parse failed: Unexpected token (10:2)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|
| ReactDOM.render(
>   <React.StrictMode>
|     <App />
|   </React.StrictMode>,

webpack 5.66.0 compiled with 1 error in 2317 ms

接下来我该怎么做才能完成这项工作？

Answer 1

好吧，我最终意识到在我的 webpack 配置中添加 myScript.js 作为 external 就可以了。但是，我无法更改我的配置文件并使其正常工作。

相反，我只是在public/index.html、的头部添加了一个脚本标签，即、

<script
    src="myScript.js"
    type="text/javascript">
</script>

导入的脚本不能用 Babel 编译

Imported script does not compile with Babel

javascript

node.js

reactjs

webpack

babeljs