Question

我正在尝试使用browserify设置基于反应的组件库。这是将其他基于反应的组件库导入为节点模块。以下是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'
      }
    }

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

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：在解析文件时解析//node_modules/orb/src/js/react/orb.react.PivotChart.jsx时出现意外的令牌（102：12）：/ /node_modules/orb/src/js/react/orb.react.PivotChart.jsx

提到的令牌位置基本上是jsx。看起来babelify没有对node_modules使用预设react。如何让浏览器使用babel presets react来获取此文件？

更新在使用webpack时，我遇到了similar issue，我后来才能解决这个问题。但看起来浏览器并不接受像webpack那样的其他文件。尝试了noParse，external等选项，但这些选项无效。

Answer 1

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

if(!empty($company)) {
    $where = $where."AND company_name LIKE :company ";
}
if(!empty($company)) {
    $companyFormat = "'%".$company."%'";$stmt->bind_param(":company",$companyForm‌at);
}

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

中添加了新条目

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

1 个答案: