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版本對我來說非常合適。