如果没有 node_modules 来自全局安装的节点应用程序，我如何从本地文件夹中请求反应组件？

Question

所以我得到了一个需要全局安装的包，它接受用户定义的反应组件并呈现它们。我使用 babel-register 并定义：

require('babel-register')({
    presets: [
        'es2015',
        'stage-0',
        'react',
    ],
});

我的 package.json 文件如下所示：

"dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "chokidar": "^1.7.0",
    "del": "^2.2.2",
    "marked": "^0.3.6",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "window-size": "^1.0.0",
    "yamljs": "^0.2.10"
},

现在因为那些用户定义的 React 组件有时存在于没有安装 .babelrc 或任何包的地方，我真的很想使用已经在包中全局安装的组件依赖项。当你在全局安装我的包时，我试图避免安装这些依赖项。虽然不确定如何。

我检查了 node_module 文件夹，确实在那里安装了所有依赖项：

.
[...]
├── babel-code-frame
├── babel-core
├── babel-generator
├── babel-helper-bindify-decorators
├── babel-helper-builder-binary-assignment-operator-visitor
├── babel-helper-builder-react-jsx
├── babel-helper-call-delegate
├── babel-helper-define-map
├── babel-helper-explode-assignable-expression
├── babel-helper-explode-class
├── babel-helper-function-name
├── babel-helper-get-function-arity
├── babel-helper-hoist-variables
├── babel-helper-optimise-call-expression
├── babel-helper-regex
├── babel-helper-remap-async-to-generator
├── babel-helper-replace-supers
├── babel-helpers
├── babel-messages
├── babel-plugin-check-es2015-constants
├── babel-plugin-syntax-async-functions
├── babel-plugin-syntax-async-generators
├── babel-plugin-syntax-class-constructor-call
├── babel-plugin-syntax-class-properties
├── babel-plugin-syntax-decorators
├── babel-plugin-syntax-do-expressions
├── babel-plugin-syntax-dynamic-import
├── babel-plugin-syntax-exponentiation-operator
├── babel-plugin-syntax-export-extensions
├── babel-plugin-syntax-flow
├── babel-plugin-syntax-function-bind
├── babel-plugin-syntax-jsx
├── babel-plugin-syntax-object-rest-spread
├── babel-plugin-syntax-trailing-function-commas
├── babel-plugin-transform-async-generator-functions
├── babel-plugin-transform-async-to-generator
├── babel-plugin-transform-class-constructor-call
├── babel-plugin-transform-class-properties
├── babel-plugin-transform-decorators
├── babel-plugin-transform-do-expressions
├── babel-plugin-transform-es2015-arrow-functions
├── babel-plugin-transform-es2015-block-scoped-functions
├── babel-plugin-transform-es2015-block-scoping
├── babel-plugin-transform-es2015-classes
├── babel-plugin-transform-es2015-computed-properties
├── babel-plugin-transform-es2015-destructuring
├── babel-plugin-transform-es2015-duplicate-keys
├── babel-plugin-transform-es2015-for-of
├── babel-plugin-transform-es2015-function-name
├── babel-plugin-transform-es2015-literals
├── babel-plugin-transform-es2015-modules-amd
├── babel-plugin-transform-es2015-modules-commonjs
├── babel-plugin-transform-es2015-modules-systemjs
├── babel-plugin-transform-es2015-modules-umd
├── babel-plugin-transform-es2015-object-super
├── babel-plugin-transform-es2015-parameters
├── babel-plugin-transform-es2015-shorthand-properties
├── babel-plugin-transform-es2015-spread
├── babel-plugin-transform-es2015-sticky-regex
├── babel-plugin-transform-es2015-template-literals
├── babel-plugin-transform-es2015-typeof-symbol
├── babel-plugin-transform-es2015-unicode-regex
├── babel-plugin-transform-exponentiation-operator
├── babel-plugin-transform-export-extensions
├── babel-plugin-transform-flow-strip-types
├── babel-plugin-transform-function-bind
├── babel-plugin-transform-object-rest-spread
├── babel-plugin-transform-react-display-name
├── babel-plugin-transform-react-jsx
├── babel-plugin-transform-react-jsx-self
├── babel-plugin-transform-react-jsx-source
├── babel-plugin-transform-regenerator
├── babel-plugin-transform-strict-mode
├── babel-preset-es2015
├── babel-preset-flow
├── babel-preset-react
├── babel-preset-stage-0
├── babel-preset-stage-1
├── babel-preset-stage-2
├── babel-preset-stage-3
├── babel-register
├── babel-runtime
├── babel-template
├── babel-traverse
├── babel-types
[...]
├── react
[...]
└── yamljs

220 directories, 0 files

我收到此错误：Couldn't find preset "es2015" relative to directory。

本地安装有效，但我无法使用 bin 绑定和我想添加的其他一些功能。

我尝试使用 ignore 或 only 选项但没有成功。

所以我猜：

问题

如何从远离我自己的 node_modules 文件夹的文件夹中导入 React 组件并对其进行 babelfy，该文件夹可能没有安装任何依赖项而不会出现错误？

更新

结果证明您可以将绝对路径传递给 babel-register 调用：

require('babel-register')({
    presets: [
        Path.normalize(`${ __dirname }/../node_modules/babel-preset-es2015`),
        Path.normalize(`${ __dirname }/../node_modules/babel-preset-stage-0`),
        Path.normalize(`${ __dirname }/../node_modules/babel-preset-react`),
    ]
});

这似乎有效，但现在应用程序抱怨无法找到 react：Error: Cannot find module 'react'，即使它在依赖项中也是如此。

更新 #2

所以找不到react的错误显然与导入react的组件有关。我想知道我是否可以将导入语句重定向到我的全局文件夹？是的，您可以使用这个漂亮的插件：https://github.com/Velenir/babel-plugin-import-redirect :)

Answer 1

所以答案原来是我的 babel-register 调用中的绝对路径。这解决了最初的问题。 :) 希望对路过的人有所帮助。

require('babel-register')({
    presets: [
        Path.normalize(`${ __dirname }/../node_modules/babel-preset-es2015`),
        Path.normalize(`${ __dirname }/../node_modules/babel-preset-stage-0`),
        Path.normalize(`${ __dirname }/../node_modules/babel-preset-react`),
    ]
});

如果没有 node_modules 来自全局安装的节点应用程序，我如何从本地文件夹中请求反应组件？

How can I require react components from a local folder without node_modules from a globally installed node app?

node.js

npm

reactjs

babeljs

babel-register

问题

更新

更新 #2