1

我需要在 React 中解析一个 JSX 字符串，就像其他线程一样

唯一的反应是使用 babel-core，不幸的是它不起作用并且不知道从这里去哪里。这是我在文件中使用 require('babel-core') 时得到的错误跟踪：

2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: WARNING in ./~/babel-core/lib/transformation/file/index.js
2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: Critical dependencies:
2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: 510:24-39 the request of a dependency is an expression
2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: 709:16-34 the request of a dependency is an expression
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/transformation/file/index.js 510:24-39 709:16-34
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack: ERROR in ./~/babel-core/lib/api/node.js
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/babel-core/lib/api
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/api/node.js 58:10-23
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack: ERROR in ./~/babel-core/lib/transformation/file/options/build-config-chain.js
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/babel-core/lib/transformation/file/options
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/transformation/file/options/build-config-chain.js 31:10-23
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: ERROR in ./~/babel-core/lib/helpers/resolve.js
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'module' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/babel-core/lib/helpers
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/helpers/resolve.js 34:14-31
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: ERROR in ./~/convert-source-map/index.js
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/convert-source-map
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack:  @ ./~/convert-source-map/index.js 2:9-22
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: ERROR in ./~/debug/node.js
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/debug
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack:  @ ./~/debug/node.js 163:15-28
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack: ERROR in ./~/debug/node.js
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'net' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/debug

如有必要，这是我的 webpack 文件：

module.exports = {
    entry: './src/app.js',
    output: {
        path: './react',
        filename: 'main.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }

        },
        { test: /\.json$/, loader: 'json-loader' },
        ]
    },
    resolve: {
        extensions: ['', '.js', '.json']
    }
};
4

2 回答 2

0

这是一个相当古老的问题，但我遇到了类似的问题并发现了这个问题。似乎一种解决方案是使用以下内容更新您的 webpack 文件：

module.exports = {
  //...
  node: {
    fs: 'empty',
  }
};

所有功劳归功于 Melchia 的解释：“当您的平台不支持文件系统时，您也可能遇到此问题。所以尝试将此行添加到您的 webpack.config.js 以添加相应的 pollyfills”

于 2020-11-28T22:33:23.413 回答
0

我在前端使用它时遇到了同样的问题。现在我在服务器端使用它并将结果转换为 json：

JSON.stringify(require("babel-core").transform(code, {
  presets: ["react"]
}))

它有效，但我无法评估结果。

编辑：所以我设法通过使用这个线程的答案来评估结果在 JavaScript 中指定 eval() 的范围？

var evalReact = function(React) {
  var React = React
  return function(str) {return eval(str)}
}

let fnEvalReact = evalReact(React)
var Compo = fnEvalReact(JSON.parse(component).code)

于 2017-08-17T08:11:01.237 回答