Meteor包导入来自npm包的css文件,该文件仅使用tmeasday标记为依赖:check-npm-versions

Question

很长一段时间以来,这个包就是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包.

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

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

但是如果软件包使用它,这也会强制应用程序安装更少或sass(在我的情况下更少).

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

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 包改变了它的结构、路径等，只需更新包即可。
• 动态导入返回承诺，因此您可以“等待”直到加载所有依赖项

坏处：

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