Rollup 用相对路径替换节点模块导入

Question

我在使用 Rollup 和 rollup-plugin-node-resolve 时遇到问题。

如果我有这种进口：

import _ from 'lodash';

它被转换为：

import _ from '../node_modules/lodash/lib/index.js';

当我尝试在使用 Webpack 的项目中使用它时，这会破坏包，因为该node_modules文件夹显然不是我的 Rollup-bundled 包的文件夹的子级（因为 npm 会平摊依赖项）。

我已经定义了所有的node_modulesas external。

这是我的相关配置：

{
  entry: 'dist/components-index.js',
  external: id => id.indexOf('node_modules') >= 0,
  plugins: [
    resolve({
      extensions: ['.jsx', '.js', '.json'],
    }),
    commonjs({
      namedExports: { '../xxx-styles/lib/index.js': ['common', 'dark', 'light' ] },
    }),
  ],
}

如何使构建保持节点模块导入保留绝对路径？我想在编写时保留它们，以便 node.js/webpack/wathever 可以正确解析导入。

Answer 1

您想在解决之前将其标记lodash为外部：

{
  entry: 'dist/components-index.js',
  external: ['lodash', ...],
  plugins: [
    resolve({
      extensions: ['.jsx', '.js', '.json'],
    }),
    commonjs({
      namedExports: { '../xxx-styles/lib/index.js': ['common', 'dark', 'light' ] },
    }),
  ],
}

将所有依赖项标记为外部的一个好方法是使用"dependencies"package.json 文件中的字段：

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import pkg from './package.json';

export default {
  entry: 'dist/components-index.js',
  external: Object.keys(pkg.dependencies),
  plugins: [
    resolve({
      extensions: ['.jsx', '.js', '.json'],
    }),
    commonjs({
      namedExports: { '../xxx-styles/lib/index.js': ['common', 'dark', 'light' ] },
    }),
  ],
}

由于您将所有内容都标记node_modules为外部，因此我建议您不要理会resolve插件——如果您明确说明文件扩展名（Rollup 可能会在不久的将来坚持这样做，以增加与浏览器中本机模块加载器的兼容性），你不需要它。