尝试对具有另一个反应组件作为节点模块的反应应用程序进行 babelify 时出错

Question

我正在尝试使用 browserify 设置基于反应的组件库。这是将其他基于 React 的组件库导入为节点模块。以下是grunt-browserify.

中的browserify配置

{
      options: {
        "transform": [
          [
            "babelify",
            {
              "presets": [
                "es2015",
                "react",
                "stage-0"
              ]
            }
          ]
        ],
        browserifyOptions: {
          debug: true,
          extensions: ['.js', '.jsx'],
          entries: ['./src/js/index.js']
        }
      },
      dist: {
        src: ['src/index.js'],
        dest: 'dist/index.js'
      }
    }

我正在导入一个包含 React 组件的节点模块。

import orb from 'orb';
import React from 'react';

class ReactComponent extends React.Component {
   componentDidMount() {
    this.ptable = new orb.pgridwidget(this.props.config);
    this.ptable.render(ReactDom.findDOMNode(this));
   }
   render() {
      return (<div></div>);
   }
}

export ReactComponent;

我遇到以下错误。

SyntaxError: Unexpected token (102:12) while parsing //node_modules/orb/src/js/react/orb.react.PivotChart.jsx while parsing file: //node_modules/orb/src/js/react/orb.react.PivotChart.jsx

提到的token位置基本上就是jsx。看起来 babelify 没有为 node_modules 使用预设 react。如何让 browserify 为这个文件使用 babel 预设 react？

更新在使用 webpack 时，我遇到了问题，我后来能够解决这个问题。但看起来 browserify 不像 webpack 那样接受额外的文件。尝试了 noParse、external 等选项，但这些选项均无效。

Answer 1

可以通过将节点模块主文件添加到条目对象来解决问题。这在配置对象的条目定义中没有明确提及。

browserifyOptions: {
          debug: true,
          extensions: ['.js', '.jsx'],
          entries: ['node_modules/orb/src/orb.js', './src/js/index.js']
        }

在 browserifyOptions

中添加了一个新条目

尝试对具有另一个反应组件作为节点模块的反应应用程序进行 babelify 时出错

Error when trying babelify of a react application which has another react component as node module

browserify

reactjs

babeljs