首页 > 解决方案 > 汇总 node_modules 的完整文件路径或将每个外部模块捆绑在单独的目录中

问题描述

我正在尝试使用这个测试 js 文件,我想通过 Rollup 为浏览器编译测试 ES 模块。

import { v4 as uuidv4 } from 'uuid';

export default function () {
    console.log(uuidv4());
}

我为此做npm ipackage.json

{
  "dependencies": {
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.0.4"
  }
}

rollup.config.js

// rollup.config.js

import nodeResolve from '@rollup/plugin-node-resolve';

export default {
    input: ['src/main.js'],
    output: {
        name: 'bundle',
        dir: 'dst',
        format: 'es'
    },
    external: ['uuid'],
    plugins: [ nodeResolve({ browser: true }) ]
};

汇总工作后,我得到:

import { v4 } from 'uuid';

function main () {
    console.log(v4());
}

export { main as default };

#1

我可以使用我的前缀获得 node_modules js-file 的完整路径吗?

例如对于 lib uuid( node_modules/uuid/dist/esm-browser/index.js) 我想要:

// for prefix '/assets/js/lib/'
import { v4 } from '/assets/js/lib/uuid/dist/esm-browser/index.js';

或者可能只是 node_modules 库文件路径:

import { v4 } from 'node_modules/uuid/dist/esm-browser/index.js';

#2

我可以为我的 js 代码导入的每个外部模块(来自包 json)在单独的目录中制作 es-bundle吗?

标签: javascriptimportbundlenode-modulesrollup

解决方案


  1. external从部分中删除模块。
  2. 使用-docspreserveModules: true_

推荐阅读