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 /控件返回错误。 JS。

为此我已经加入了lightslider/IMG /根目录controls.png，它工作正常，但没有任何正确的方法可以跳过这一步，并没有要求我加图像资源手动根目录？

我发现在字体资源this post字体真棒相关的simillar讨论，但我找不到适当的解决方案，可以在我的情况下应用它。

在此先感谢。

Answer 1

找到aurelia.json最简单的方法是处理除.js，.css和.html之外的其他资源，通过this answer通过MannikJ。我已经更新了aurelia_project /任务/ 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版本对我来说非常合适。