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

Question

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

我正在尝试在我的项目中使用 Ramda 作为模块，这样在我的 ./app/js *.js 文件中我可以做类似的事情：

include map from 'ramda/src/map';

基本上我希望能够轻松地将 Ramda 作为模块导入，以便我可以访问如上所示的单独函数。我将 ramda 作为一个模块安装在 node_modules 目录中，我使用 rollup 构建我用 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 以允许汇总提供第 3 方模块以访问项目文件（例如 node_modules 中的 Ramda）：
```
npm install --save-dev rollup-plugin-node-resolve
```
然后，我不得不在 rollup.config.js 中添加 resolve 作为依赖项，如下所示：

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

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

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

从 babel 中排除 node_modules 并包含 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 导入）

How to set up Ramda in Rollup with Babel (to use ES6 import)

javascript

ecmascript-6

babeljs

rollup

ramda.js