Справочник по внешней библиотеке работает в Webpack, но не в JSPM в Aurelia

Я пытаюсь использовать библиотеку Datatables.net в своем приложении Aurelia.Справочник по внешней библиотеке работает в Webpack, но не в JSPM в Aurelia

https://www.npmjs.com/package/datatables.net

Вопрос заключается в том, что следующий код работает с версией WebPack от Aurelia. Сборки JSPM я получаю ошибку

mytable.js:13 Uncaught (in promise) TypeError: $(...).dataTable is not a function(…)attached @ mytable.js:13attached @ aurelia-templating.js:2947attached @ aurelia-templating.js:1016attached @ aurelia-templating.js:1472attached @ aurelia-templating.js:1026attached @ aurelia-templating.js:1472(anonymous function) @ aurelia-framework.js:204

Я добавил "datatables.net": "npm:[email protected]^1.10.11", к моему package.json и сделал jspm install -y и datatables.net было сказано это было установлено.

ViewModel:

import $ from 'jquery'; 
import dataTable from 'datatables.net'; 
export class MyTable{ 
    dataSet = [ 
     ['Ken','Husband','Home'], 
     ['Barbie','Wife','Home'] 
    ]; 
    attached(){ 

    //console.log(dataTable); 
    var dataSet = this.dataSet; 
    //console.log(dataSet); 
    //require('datatables.net')(window, $); 
    $(() =>  $('#example').DataTable({ 
     select: true, 
     data: dataSet, 
     columns: [ 
     { title: "Name" }, 
     { title: "Position" }, 
     { title: "Office" } 

     ] 
    })); 
    } 
}

Посмотреть

<template> 
    <div class="container" style="margin-top:20px"> 
    <div>test datatables</div> 
    <table id="example" class="display" width="100%"></table> 
    </div> 

</template>

источник

2016-06-05 Kevin Vasko

его вполне возможный jspm не может импортировать его должным образом. Иногда вам нужно добавить прокладки или указать основную точку входа. –

@MeirionHughes, как бы я это сделал? Не уверен, что такое Шим. –

Решение проблемы. Все было в том, как я добавлял библиотеки в свой проект, как я их импортировал, и небольшая проблема с тем, как JSPM загружает библиотеку (по крайней мере, я думаю, что кто-то, у кого больше опыта работы с Javascript, может исправить меня).

Решение по этой ссылке.

https://github.com/aurelia/skeleton-navigation/issues/473

Рабочий пример:

Добавьте следующие библиотеки в свой проект

jspm install datatables.net=npm:datatables.net 
jspm install datatables.net-responsive=npm:datatables.net-responsive 
jspm install datatables.net-responsive-bs=npm:datatables.net-responsive-bs 
jspm install datatables.net-bs=npm:datatables.net-bs

index.html:

<html> 
    <head> 
    <title>Aurelia</title> 
    <link rel="stylesheet" href="jspm_packages/npm/[email protected]/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="styles/styles.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 

    <body aurelia-app="main"> 
    <div class="splash"> 
     <div class="message">Aurelia Navigation Skeleton</div> 
     <i class="fa fa-spinner fa-spin"></i> 
    </div> 

    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script> 
     // ensure jQuery is loaded and set before other imports in you project 
     System.import('jquery') 
     .then(jquery => { 
      window.jQuery = jquery; 
      window.$ = jquery; 

      // now load and bootstrap aurelia 
      return System.import('aurelia-bootstrapper'); 
     }); 
    </script> 
    </body> 
</html>

Welcome.html:

<template> 
    <section class="au-animate"> 
    <div class="container" style="margin-top:20px"> 
     <div>test datatables</div> 
     <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%"></table> 
    </div> 
    </section> 
</template>

добро пожаловать.js

import * as datatable from 'datatables'; 
//following only once in you app i think 
import * as responsive from 'datatables.net-responsive'; 
import * as responsiveBs from 'datatables.net-responsive-bs'; 
import * as netBs from 'datatables.net-bs'; 

//This could be done an alternative way apparently (see below) but this is what worked for me. I have to give credit to the poster doktordirk on the github aurelia issue. 
responsive.default(window, $) 
responsiveBs.default(window, $)  
netBs.default(window, $) 

//alternative method 
//let responsive = responsive.default(); // to change settings? 
//responsiveBs.default(); 
//netBs.default(); 

export class Welcome { 
    dataSet = [ 
     ['Ken','Husband','Home'], 
     ['Barbie','Wife','Home'] 
    ]; 

    attached() { 
    // can call: responsive(settings, options); 
    $('#example').DataTable({ 
     select: true, 
     data: this.dataSet, 
     columns: [ 
     { title: "Name" }, 
     { title: "Position" }, 
     { title: "Office" } 
     ] 
    }); 
    } 
}

источник

2016-06-07 18:28:01

При использовании JSPM вам не нужно ничего менять в package.json. Вы должны установить JavaScript библиотеки с помощью JSPM, например:

jspm install npm:datatables.net

Затем, вы должны импортировать его, используя это:

import $ from 'jquery'; 
import 'datatables.net'; 
export class MyTable{ 
    dataSet = [ 
     ['Ken','Husband','Home'], 
     ['Barbie','Wife','Home'] 
    ]; 
    attached(){ 

    //console.log(dataTable); 
    var dataSet = this.dataSet; 
    $('#example').DataTable({ 
     select: true, 
     data: dataSet, 
     columns: [ 
     { title: "Name" }, 
     { title: "Position" }, 
     { title: "Office" } 

     ] 
    }); 
    } 
}

Надеется, что это помогает!

источник

2016-06-05 05:38:11

Спасибо, но я получаю ту же проблему. Я очистил весь скелет и сделал это снова, и он все еще дает мне mytable.js: 15 Непонятно (в обещании) TypeError: $ (...). DataTable не является функцией (...) –

Я не уверен, но я думаю, что метод не подходит. Попробуйте '$ (...). DataTable' –

К сожалению, это та же проблема с« DataTables »или« dataTables ». –

Похоже, он уже был настроен в JSPM: https://github.com/jspm/registry/blob/master/package-overrides/github/DataTables/[email protected]

Просто установите его через свой псевдоним:

jspm install datatables

Отзывчивый имеет переопределение тоже: и https://github.com/jspm/registry/blob/master/package-overrides/github/DataTables/[email protected]

, но я думаю, вам необходимо установить его как:

jspm install github:DataTables/[email protected]

источник

2016-06-05 18:11:11

Спасибо. Я пытаюсь запустить этот пример (https://datatables.net/extensions/responsive/examples/styling/bootstrap.html). который нуждается в нескольких других библиотеках. Ссылка, которую вы предоставили, будет работать, но я окажусь в том же месте, что и сейчас, с этими библиотеками (поскольку они не находятся в jspm). Я пытаюсь заставить datatables.net работать, поэтому я могу повторить этот процесс с другими библиотеками, которые мне нужны, чтобы этот пример работал. Я могу заставить обычные «datatables» работать, но не «datatables.net». Если я использую «datatables», когда мне нужны другие зависимости, я нахожусь в одной лодке. –

Спасибо. Поэтому я добавил обоих из них и посмотрел, что он загрузил. Мне все еще не хватает 1 js-файла. С 'jspm install datatables' я получаю' jquery.dataTables.js', 'jspm install github: DataTables/Responsive' дает мне' dataTables.responsive.js' и 'responsive.bootstrap.js', но я все еще не хватает' dataTables.bootstrap.js' и копаться по этим ссылкам, я не вижу, чтобы переопределение было выполнено для 'dataTables.bootstrap.js'. Мне просто не повезло? Без этого я не думаю, что этот пример, который я связал, будет работать. –

Да, я подозреваю, что вам нужно будет сделать некоторые переопределения (или datatables.net, если это проще). jspm все еще разрабатывается. Я думаю, что новая версия 0.17 (бета-версия) имеет некоторые улучшения для загрузки модуля npm. –

Справочник по внешней библиотеке работает в Webpack, но не в JSPM в Aurelia

ответ

Смежные вопросы