Question

我有一个可以打包2个目标（移动和桌面）的项目。我仍然希望将我的源文件保存在同一个地方，因为它们中只有少数不同，但差别太大了，只能使用响应式方法（手机上缺少页面，或桌面上完全不同，... 。）我想让打包的应用程序尽可能小。

所以我创建了一个loader.mobile.styl和loader.desktop.styl，知道打包器会导入一个或另一个，具体取决于它正在构建的目标/平台：

TARGET='mobile' // or 'desktop' for loader.desktop.stylus
@import '_import' // my import helper
import('_application') // my application main stylus file requiring al others

和_import.styl：

import(file)
  @import file
  @import file + '.' + TARGET

因此，当您致电import('_application')时，目标是首先导入_application.styl然后_application.mobile.styl（如果目标是桌面，则为_application.desktop.styl

除了在大多数情况下只有共享的_application.styl或特定的_application.mobile.styl可能存在而不存在另一个时，它的效果很好。

因此，我试图找到一种方法来使用Stylus进行导入（如果存在）。如果只有像fileExists这样的东西可用，我可以做到，或者try...catch即使没有catch块，所以如果它失败则没关系。

Answer 1

经过一些研究后，我最终编写了一个插件，它将通过定义自定义@import函数来替换import指令。对于那些可能会有所帮助的人，以下是我在自己的案例中的表现：

在档案plugins.js中：

var sysPath = require('path');
var fs = require('fs');
// here is where I defined some helper to know what is the currently building target
var conf = require('../config');

var plugin = function () {
  return function (style) {
    var nodes = this.nodes;

    style.define('import', function (param) {
      var target = conf.currentTarget(),
          realPath = sysPath.dirname(conf.ROOT + sysPath.sep + param.filename),
          baseName = param.string.replace(/\.styl$/, ''),
          targetFile = baseName + '.' + target + '.styl',
          file = baseName + '.styl',
          res = new nodes.Root();
      // first include the file (myFile.styl for example)  if it exists
      if (fs.existsSync(realPath + sysPath.sep + file)) {
        res.push(new nodes.Import(new nodes.String(file)));
      }
      // then include the target specific file (myFile.mobile.styl for example)  if it exists
      if (fs.existsSync(realPath + sysPath.sep + targetFile)) {
        res.push(new nodes.Import(new nodes.String(targetFile)));
      }
      return res;
    });


  };
};
module.exports = plugin;

loader.styl

：

use('plugins.js')
import('application')

因此，如果import('xyz')存在，则xyz.styl将导入xyz.mobile.styl，如果存在，则xyz.desktop.styl（或desktop如果{{1}}是目标）。

如何告诉Stylus在丢失@import时不会失败

1 个答案: