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

【问题标题】：How to set up Ramda in Rollup with Babel (to use ES6 import)如何使用 Babel 在 Rollup 中设置 Ramda（使用 ES6 导入）
【发布时间】：2017-04-23 06:08:14
【问题描述】：

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

我正在尝试在我的项目中使用 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 目录中使用它的建议。如果问题不清楚，请告诉我。

谢谢。

【问题讨论】：

标签： javascript ecmascript-6 babeljs rollup ramda.js

【解决方案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'

感谢插件，只提供指定的功能。

希望这对遇到同样问题的人有所帮助，或者对将来遇到同样问题的人有所帮助。

干杯。

【讨论】：