Package subpath './es/components/button/style/css' is not defined by "exports" in D:\cdn\node_modules\element-plus\package.json

[luboxy]

自己封装组件库，引用了element-plus，用的unplugin-element-plus自动导入样式，代码编译后，里面有相关代码

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

cdn插件modules加入自己组件，就会报错。

跟踪代码发现是 _import 执行的时候报的这个错误。 重现步骤： 创建一个vite项目，新建 test.cjs 文件，内容如下：

var elementPlus = require('element-plus');
require('element-plus/es/components/button/style/css');
exports.ElButton = elementPlus.ElButton

vite.config.ts 文件里面添加以下代码：

import url from "url";
const modulePath = url.pathToFileURL(
  "D:\\cdn\\test.cjs"
);
const _import = new Function("specifier", "return import(specifier)");
const pkg  = await _import(modulePath);

运行就会报错：Package subpath './es/components/button/style/css' is not defined by "exports"...

删除 require('element-plus/es/components/button/style/css')就正常了。

[nonzzz]

能提供一下cdn的配置嘛

[nonzzz]

_import的逻辑是在getPackageExports里面执行的而这个方法只会在buildStart阶段执行。不会发生在transform。我需要得到具体的配置信息(插件版本以及unplugin的版本)

[nonzzz]

这是我用vite-plugin-inspect得到的结果。他正常工作

[luboxy]

unplugin-element-plus：0.4.0 vite-plugin-cdn2：0.13.0

 cdn({
      url: "//unpkg.com",
      modules: [
        "vue",
        { name: "element-plus" },
        { name: "sh-ui", global: "ShUi" },
      ],
      resolve: (base, { name, version }) => {
        if (name === "vue" || name === "vue-router") {
          return `${base}/${name}/dist/${name}.global.prod.js`;
        } else if (name === "element-plus") {
          return `${base}/${name}@${version}/dist/index.full.min.js`;
        }else {
          return `http://localhost/sh-ui/index.full.js`;
        }
      }
    })

就是 import报错了，没有进到resolve里面呢 ，sh-ui那个，只有vue和element进了resolve。

你安装我这个包，试一下看看，就会报错了，pnpm add ./sh-ui-0.0.1.tgz

sh-ui-0.0.1.tgz

[luboxy]

生成的只有两个地址，sh-ui那个就报错了没有生成。

[nonzzz]

经过考虑我不想增加scanner的复杂度引入pre build的概念会加增加scanner的时间。虽然他能解决极大部分的问题。但是我个人是无法接受的。因为对于JavaScript库来说。JavaScript就不该带有非JavaScript文件的引入。比如

import { x } from 'module'
import './a.css'

我使用了本地安装的方式载入了这个文件包我发现你提供的库里面依赖了很多css文件 这里我建议是能否提取这部分css 让用户单独引入呢？因为社区上大部分插件都是这么做的。

[nonzzz]

通过查看bundle产物 这些完全是不符合预期的。 你可以提供一个类似于style的文件夹存放他们。要么内联成css字符串。

[nonzzz]

除非 nodejs 提供 esm版本的require.extension 。

[luboxy]

是公司内部的业务组件库，依赖了很多第三方的库，不引入CSS就没问题 js里面，我单独处理一下css，独立出来。多谢了。

[nonzzz]

其实业务组件库内部的话完全可以外部化vue就够了。剩下的内容这个插件也能正常处理