Meteor包導入來自npm包的css文件，該文件僅使用tmeasday標記為依賴：check-npm-versions

Question

很長一段時間都有這個包tmeasday：check-npm-versions允許定義一個隱式的npm包依賴到Meteor包。

如果您正在編寫一個依賴於給定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中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包改變它的結構，路徑等，只需更新包。
• 動態導入返回promise，因此您可以“等待”直到加載所有依賴項

壞處：

• 資產不能立即獲得，加載和顯示之間可能會有輕微的偏差。 有時您會看到樣式未設置幾毫秒，並且您可能會顯示加載屏幕/啟動畫面，直到導入所有樣式