Aurelia CLI : 将带有图像资源的 npm 包添加到 Aurelia CLI 项目

Question

我正在尝试在我的 Aurelia CLI 0.23.0 项目中使用来自 NPM 的 lightslider (jquery slider library)。

我已将此添加到 aurelia.json 依赖项中：

        {
        "name": "lightslider",
        "path": "../node_modules/lightslider/dist",
        "main": "js/lightslider.min",
        "deps": ["jquery"],
        "resources": [
          "css/lightslider.min.css"
        ]
      },

将此添加到我的 home.html 模板中：

<require from="lightslider/css/lightslider.min.css"></require>

在 home.ts 中我添加了这些：

import * as $ from 'jquery';
import lightSlider from 'lightslider';

--

attached() {
    $(document).ready(function(){
        $("#light-slider").lightSlider();
    });

}

该库还具有 img/controls.png，如果我在这样的资源下添加 aurelia.json 依赖项：

          {
        "name": "lightslider",
        "path": "../node_modules/lightslider/dist",
        "main": "js/lightslider.min",
        "deps": ["jquery"],
        "resources": [
          "css/lightslider.min.css",
          "img/controls.png"
        ]
      },

它在查找 img/controls.js 时返回错误。

为此，我在根目录中添加了 lightslider/img/controls.png，它工作正常，但是有没有正确的方法可以跳过这一步，它不需要我要手动将图像资源添加到根目录吗？

我在 this post 中找到了与 Font-awesome 相关的类似讨论，以获取字体资源，但我找不到能够在我的案例中应用它的正确解决方案。

提前致谢。

Answer 1

我能找到的获取 aurelia.json 处理除 .js、.css 和 .html 之外的其他资源的最简单方法是通过 MannikJ 的this answer。我已将 aurelia_project/tasks/build.ts 更新为：

import * as gulp from 'gulp';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import { build } from 'aurelia-cli';
import * as project from '../aurelia.json';
import * as fs from 'fs';
import * as readline from 'readline';
import * as os from 'os';

export default gulp.series(
  copyAdditionalResources,
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS
  ),
  writeBundles
);

function copyAdditionalResources(done){
  readGitIgnore();
  done();
}

function readGitIgnore() {
  let lineReader = readline.createInterface({
    input: fs.createReadStream('./.gitignore')
  });
  let gitignore: Array<String> = [];

  lineReader.on('line', (line) => {
    gitignore.push(line);
  });

  lineReader.on('close', (err) => {
    copyFiles(gitignore);
  })
}

function copyFiles(gitignore: Array<String>) {
  let stream,
    bundle = project.build.bundles.find(function (bundle) {
      return bundle.name === "vendor-bundle.js";
    });

  // iterate over all dependencies specified in aurelia.json
  for (let i = 0; i < bundle.dependencies.length; i++) {
    let dependency = bundle.dependencies[i];
    let collectedResources = [];
    if (dependency.path && dependency.resources) {
      // run over resources array of each dependency
      for (let n = 0; n < dependency.resources.length; n++) {
        let resource = dependency.resources[n];
        let ext = resource.substr(resource.lastIndexOf('.') + 1);
        // only copy resources that are not managed by aurelia-cli
        if (ext !== 'js' && ext != 'css' && ext != 'html' && ext !== 'less' && ext != 'scss') {
          collectedResources.push(resource);
          dependency.resources.splice(n, 1);
          n--;
        }
      }
      if (collectedResources.length) {
        if (gitignore.indexOf(dependency.name)< 0) {
          console.log('Adding line to .gitignore:', dependency.name);
          fs.appendFile('./.gitignore', os.EOL + dependency.name, (err) => { if (err) { console.log(err) } });
        }

        for (let m = 0; m < collectedResources.length; m++) {
          let currentResource = collectedResources[m];
          if (currentResource.charAt(0) != '/') {
            currentResource = '/' + currentResource;
          }
          let path = dependency.path.replace("../", "./");
          let sourceFile = path + currentResource;
          let destPath = './' + dependency.name + currentResource.slice(0, currentResource.lastIndexOf('/'));
          console.log('Copying resource', sourceFile, 'to', destPath);
          // copy files
          gulp.src(sourceFile)
            .pipe(gulp.dest(destPath));
        }
      }
    }
  }
}


function readProjectConfiguration() {
  return build.src(project);
}

function writeBundles() {
  return build.dest();
}

这是打字稿版本，你可以找到ES6版本in here。我尚未对其进行测试，但 Typescript 版本对我来说非常适合。