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中使用test-comp和import编写了模块export，并在main中使用了package.json的{{1}}条目是指test-comp。

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

如果您想在browserify中要求使用ES6语法的模块，则需要

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
添加src/index.js作为babelify的依赖关系，并在package's 'browserify' entry中添加test-comp作为browserify转换，如babelify中所述。

无法将react模块作为节点模块加载

1 个答案: