Meteor 包从仅使用 tmeasday :check-npm-versions 标记为依赖项的 npm 包导入 css 文件

Question

自从很久以来就有这个包tmeasday:check-npm-versions允许定义对 Meteor 包的隐式 npm 包依赖项。

Use this package if you are writing an Atmosphere package that depends on a given npm package is installed at the app level of projects you are installed in.

现在我正在写一个 Meteor 包，比如说 me:my-package并且依赖于一个 npm 包，比如 some-package .这个 npm 包需要我手动导入这些样式。

该文件夹位于 some-package/style/main.less .

我尝试在包中导入文件，但无法将其导入包的 less 文件中:

@import "some-package/style/main";
@import "{}/some-package/style/main";
@import "node_modules/some-package/style/main";
@import "{}/node_modules/some-package/style/main";

都抛出相同的错误:

While processing files with less (for target web.browser):
packages/me:my-package/style.less:1: Unknown import: <one of the path's above>

原因很明显:Meteor 包通常需要我通过 api.addFiles 添加文件但是该包对导入此文件的 npm 包没有“真正的依赖关系”。

我可以将导入样式的“责任”转移到将使用“me:my-package”的应用程序中，因为它也必须安装 npm 包。

将以下行放入将使用 me:my-package 的应用程序的 css 中实际工作:

@import "/node_modules/some-package/style/main.less";

但这也会迫使应用程序安装 less 或 sass 如果包使用它(在我的情况下是 less )。

有人设法以对用户友好的方式解决了这个问题？

Answer 1

一段时间后，我回到这个问题并偶然找到了答案。可以通过 dynamic-import 来实现包裹。

您需要在返回动态导入数组的导出函数中添加要导入的所有样式。

所以让我们考虑假设的包me:mypackage :

Package.describe({
  name: 'me:mypackage',
  // ...
});

// this example uses it only on the client 
// because the focus is importing styles
// but the pattern could work for other assets, too
Package.onUse(function(api) {
  api.versionsFrom('1.6');
  api.use('ecmascript', 'client');
  api.use('underscore', 'client');
  api.use('tmeasday:check-npm-versions', 'client')
  api.mainModule('mypackage.js', 'client');
});

请注意，我使用 api.mainModule在这里，所以我们将导出一些东西。如果要将包添加到全局命名空间，则必须将函数与动态导入附加到某处以使其可访问。

在您的主模块中，您声明您的 npm 依赖项和您的动态样式导入:

import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions';
checkNpmVersions({
  'some-package': '4.x.x'
}, 'me:mypackage');

const somepackage = require('some-package)
// do whatever with some-package....

// export a function that let's your project
// to be able to just import the right style deps
export const importStyles = function() {
  return [
    import('some-package/style/main.css'),
    // ... and more if required
  ]
}

在您的项目中，您需要添加 dynamic-imports和 me:mypackage :

$ meteor add dynamic-imports me:mypackage

并将其导入到您的 client/main.js 的顶层:

import { importStyles } from 'meteor/me:mypackage'
importStyles()

优势:

无需在主项目中显式导入样式

你可以继续避开NPM.depends在您的包裹中

如果依赖的 npm 包改变了它的结构、路径等，只需更新包。

动态导入返回 promise ，因此您可以“等待”直到加载所有依赖项

坏处:

Assets 无法立即使用，加载和显示之间可能会有轻微的偏移。有时您会看到样式在几毫秒内未设置，并且您可能会显示加载屏幕/启动屏幕，直到导入所有样式