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

Question

我有一个问题与汇总和汇总插件节点解决。

如果我有这种类型的进口：

import _ from 'lodash';

它被转换为：

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

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

我已经将所有的node_modules定义为外部。

这是我的相关配置：

{
  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' ] },
    }),
  ],
}

如何使构建保持节点模块导入保持绝对路径？我想在写的时候保存它们，这样节点。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”字段。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可能会在不久的将来坚持使用该插件），那么您就不需要它了。