无法将反应模块加载为节点模块

Question

我在路径中有一个反应组件 src/components/test

import React from 'react';
import ReactDom from 'react-dom';

class TestComp extends React.Component {}
export default TestComp;

我正在从路径中公开 index.js 中的组件 src/index.js

import TestComp from './components/test';
export {
  TestComp
};

我在 package.json 中添加了main 为"main": "src/index.js"

我已经发布了上述应用程序的 npm 包test-comp 并在另一个应用程序中使用相同的包。 main.js

import {TestComp} from 'test-comp';

我在这个应用程序中使用 grunt-browserify 并设置了以下选项。

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

当我运行grunt browserify 时出现以下错误。

>> import TestComp from './components/test';
>> ^
>> ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Warning: Error running grunt-browserify. Use --force to continue.

它可能不理解节点模块中提到的路径或拒绝理解相同的 linting。我什至尝试在 .eslintrc 中添加以下内容，但没有成功

{
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
  },
  "env": {
      "browser": true,
      "es6": true
  },
  "ecmaFeatures": {
      "modules": true
  }
}

我尝试了大多数与此错误相关的 SO 答案。但仍然卡在同一个地方。

编辑 我可以使用几乎相似的配置直接浏览第一个模块。如上所述，当第一个模块作为节点依赖加载到其他应用程序中时出现此错误。

Answer 1

所以你在 ES6 中使用import 和export 编写了模块test-comp，而test-comp 中package.json 的main 条目指的是src/index.js。

答案是 browserify 转换并不适用于您需要的每个模块。它们仅适用于直接项目：不适用于项目的依赖项。

如果你想在 browserify 中要求一个使用 ES6 语法的模块，你要么需要

1. Add a prepublish script to test-comp that transpiles it to ES5, and change the main entry of test-comp to refer to that ES5 version, not the ES6 version
2. 将babelify 添加为test-comp 的依赖项，并将babelify 添加为package's 'browserify' entry 中的browserify 转换，如babelify 中所述。