7
Я не могу использовать библиотеки javascript для DataTables (или любой внешний javascript для начальной загрузки). Импорт Angular отлично работает.Использование datatables с угловым + webpack + es6
Это то, что у меня есть в файле app.js.
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import 'datatables.net-bs/js/dataTables.bootstrap';
import './assets/css/styles.css';
import angular from 'angular';
import uirouter from 'angular-ui-router';
import routing from './app.config';
import dashboard from './dashboard';
angular.module('app', [uirouter, dashboard])
.config(routing);
и мой webpack.config.js файл:
var webpack = require('webpack');
var path = require('path');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: [
'webpack/hot/dev-server',
path.resolve(__dirname, 'app/app.js')
],
output: {
path: __dirname + '/build',
publicPath: '/',
filename: './bundle.js'
},
module: {
loaders:[
{ test: /\.html$/, exclude: /node_modules/, loader: 'html' },
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js?$/, include: path.resolve(__dirname, 'app'), exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
},
resolve: {
root: path.join(__dirname, 'app'),
extensions: ['', '.js', '.css'],
modulesDirectories: ['app', 'node_modules']
},
plugins: [
new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Я не получаю ошибки о невозможности найти эти файлы JavaScript Я пытаюсь импортировать (bootstrap.min.js, dataTables.bootstrap .js и т. д.), однако, похоже, они не используют их.
В моем html-файле, который должен использовать datatable, похоже, что он только вытягивает из css, и ничто не применяется к нему из файлов javascript.
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTables_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+/OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+/OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+/OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+/OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
</div>
Я пропустил что-то здесь? Трудно найти решения для этого онлайн, поскольку не многие люди, похоже, используют Angular с ES6 и Webpack.
Я следую примеру вашего примера, но он все еще работает. Вы обнаружили другое решение? – enricop89
@ enricop89 Почему он не работает? любые сообщения об ошибках? –
Привет, Дэвид, не было сообщений об ошибках. Кстати, я решил проблему ...Я просто импортировал неправильный модуль. В любом случае, – enricop89