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

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 添加文件，但该包没有 'real dependency' 到 npm 包来导入此文件。

我可以将导入样式的 'responsibility' 移动到将使用 'me:my-package' 的应用程序，因为它也必须安装 npm 包。

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

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

但这也会强制应用程序安装更少或 sass 如果包使用它（在我的情况下更少）。

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

Answer 1

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

您需要将所有样式添加到一个导出函数中导入，该函数 return 是一个动态导入数组。

那么让我们考虑一下假设的包 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 中的 top-level:

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

优势：

无需在主项目中显式导入样式
您可以继续在包裹中避免 NPM.depends
如果依赖的 npm 包改变了它的结构、路径等，只需更新包
动态导入 return 承诺，因此您可以 "wait" 直到加载所有依赖项

缺点：

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

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

Meteor package import css files from npm package that is only marked as dependency using tmeasday:check-npm-versions

dependencies

meteor

meteor-packages