流星软件包从NPM软件包导入CSS文件，仅使用TMEASDAY:CHECK-NPM-VERSIONS标记为依赖项

Question

由于有很长的一段时间，因此允许将隐式npm软件包依赖关系定义为流星软件包。

如果您写的是依赖的气氛包，请使用此软件包 在给定的NPM软件包上安装在您的应用程序级别的项目级别 安装在。

现在，我正在编写一个流星软件包，例如me:my-package，并且对NPM软件包有依赖性，例如some-package。此NPM软件包要求我手动导入这些样式。

该文件夹位于some-package/style/main.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>

这里明显的原因：流星软件包通常要求我通过api.addFiles添加文件，但是该软件包对NPM软件包没有"真正的依赖"来导入此文件。

我可以将导入样式的"责任"移至将使用" Me：my-pake"的应用程序，因为它也必须安装NPM软件包。

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

@import "/node_modules/some-package/style/main.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，所以我们将导出一些东西。如果要将软件包添加到全局名称空间中，则必须将功能连接到Dynamic Imports的某个地方以使其可访问。

在您的主模块中，您声明您的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软件包更改其结构，路径等，请更新软件包。
• 动态进口返回承诺，因此您可以"等待"，直到加载所有依赖关系

缺点：

• 资产不立即可用，加载和显示之间可能会有略有偏移。有时，您会看到未设置的样式用于某些Miliseconds，并且您可能会显示加载屏幕/飞溅屏幕，直到所有样式导入