Question

我使用React和ES6使用babel和webpack。我对这个生态系统很陌生。

我正在尝试将一些常用的实用程序函数导入到我的jsx文件中，但是react无法找到该文件

homepage.jsx

var pathToRoot = './../..';
import path from 'path';
import React from 'react';
import ReactDOM from 'react-dom';
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;

//some react/JSX code

utils.js

var nextWrappedIndex = function(dataArray) {
    //some plain js code
    return newIndex;
}

exports.nextWrappedIndex = nextWrappedIndex;

目录结构如下：

src
|--app.js
|--components
|  |--homepage
|     |--homepage.jsx
|
|--lib
|  |--utils.js

我在Windows 10机器上，在编译期间遇到问题，通过任何其他方式提供路径。使用path.join解决了编译问题，但渲染时浏览器会抛出此错误 Uncaught Error: Cannot find module '../../lib/utils.js'.

我如何做到这一点？

此外，这是最好的方法吗（如果它完全是应该在这样的生态系统中完成的那样）？

Answer 1

我在这种设置中找到的最好和最简单的方法之一就是使用Webpack别名。

Webpack别名只会将绝对路径与可用于从任何位置导入别名模块的名称相关联。无需计算＆＃34; ../＆＃34;了。

如何创建别名？

让我们假设您的Webpack配置位于src文件夹的父文件夹中。

您可以在配置中添加以下resolve section。

const SRC_FOLDER = path.join(__dirname, 'src')

resolve: {
  alias: {
    'my-utils': path.join(SRC_FOLDER, 'lib', 'utils')
  }
}

现在，在您的应用中的任何位置，您可以在任何模块或React组件中执行以下操作：

import utils from 'my-utils'

class MyComponent extends React.component {

   render () {
     utils.doSomething()
   }
}

关于此方法的小注释。如果使用酶等工具运行单元测试，并且不通过Webpack运行测试的组件，则需要使用babel-plugin-webpack-alias。

Webpack网站上的更多信息：Webpack aliases

Answer 2

我通过替换

解决了这个问题

var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;

与

import nextWrappedIndex from './../../lib/utils.js';

Answer 3

我试图重现你的代码，Webpack给我打印了以下错误：

WARNING in ./app/components/homepage/homepage.jsx
Critical dependencies:
  50:0-45 the request of a dependency is an expression
  @ ./app/components/homepage/homepage.jsx 50:0-45

这意味着Webpack无法识别您的require()表达式，因为它仅适用于静态路径。所以，它会阻碍你的工作方式。

如果您想避免导入中的长相对路径，我建议您设置Webpack。

首先，根据Amida的回答你可以extra module root。

另外，您可以通过resolve.modules设置{{3}}，以便在导入绝对内容时使webpack查看您的src文件夹，例如lib/utils.js

在reactjs中导入自创建的库

3 个答案:

如何创建别名？