Question

在提出问题之前，我想首先分享项目的文件夹结构：

我正在尝试将Ramda用作我项目中的模块，以便在我的./app/js *。js 文件中我可以执行以下操作：

include map from 'ramda/src/map';

基本上我希望能够轻松导入Ramda作为模块，以便我可以访问如上所示的单独功能。我将ramda作为模块安装在node_modules目录中，并使用汇总来构建用 ES6 编写的js文件。

我的 rollup.config.js 文件如下所示：

import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import commonjs from 'rollup-plugin-commonjs';

export default {
    entry: 'app/js/main.js',
    dest: 'app/min/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        eslint({
            'exclude': [
                'app/css/**'
            ]
        }),
        babel(),
        commonjs({
            include: 'node_modules/**'
        })
    ]
};

我真的很感激如何正确设置它以在./app/js目录中使用它。如果问题不明确，请告诉我。

谢谢。

Answer 1

我能够解决这个问题。用同样的设置。我所要做的只是更改 rollup.config.js 配置。为了更详细，我按照下面描述的步骤进行了操作：

安装插件rollup-plugin-node-resolve以允许汇总服务第三方模块访问项目文件（例如node_modules中的Ramda）：
```
npm install --save-dev rollup-plugin-node-resolve
```
然后，我必须在resolve中添加rollup.config.js作为依赖项，如下所示：

放置文件的顶部：
```
import resolve from 'rollup-plugin-node-resolve';
```

使用以下参数在plugins数组中调用resolve方法：

//...code before
resolve({
    jsnext: true,
    browser: true,
    main: true,
    preferBuiltins: false
}),
//...code after

从node_modules中排除babel并包含commonjs中的所有内容，以确保模块作为依赖项传递给项目：

//...code before
babel({
    exclude: "node_modules/**",
    runtimeHelpers: false
}),
commonjs({
    include: 'node_modules/**'
}) 
//...code after

rollup.config.js文件最终看起来像这样：

import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
    entry: 'app/js/main.js',
    dest: 'app/min/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        resolve({
            jsnext: true,
            browser: true,
            main: true,
            preferBuiltins: false
        }),
        eslint({
            'exclude': [
                'app/css/**'
            ]
        }),
        babel({
            exclude: "node_modules/**",
            runtimeHelpers: false
        }),
        commonjs({
            include: 'node_modules/**'
        })
    ]

};

最终这对我有用。在./app/js/目录中，在任何文件中，我都可以从Ramda导入特定功能，如下所示：

import {default as map} from 'ramda/src/map';

此外，在完成上述步骤后，我还能够安装和集成这个令人惊奇的插件，使得导入特定功能变得更加容易 - babel-plugin-ramda。

然后，您可以以更简单的方式导入特定功能：

import {map, curry} from 'ramda'

由于该插件，将只提供指定的功能。

希望这可以帮助遇到相同问题的任何人，或者帮助那些将来遇到它的人。

干杯。

如何使用Babel在Rollup中设置Ramda（使用ES6导入）

1 个答案: