9

因为很长一段时间以来，这个包tmeasday:check-npm-versions允许定义对 Meteor 包的隐式 npm 包依赖。

如果您正在编写一个依赖于给定 npm 包的 Atmosphere 包，请使用此包，该包安装在您安装的项目的应用程序级别。

现在我正在编写一个 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 ）。

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

4

1 回答 1

0

一段时间后，我回到这个问题并偶然找到了答案。可以通过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 包改变了它的结构、路径等，只需更新包。
  • 动态导入返回承诺，因此您可以“等待”直到加载所有依赖项

坏处：

  • 资产无法立即使用，加载和显示之间可能会有轻微的偏移。有时您会看到样式在几毫秒内未设置，并且您可能会显示加载屏幕/启动屏幕，直到导入所有样式
于 2019-06-01T10:07:39.830 回答