Sử dụng datatables với góc + webpack + es6

Question

Tôi không thể sử dụng các thư viện javascript cho DataTables (hoặc bất kỳ javascript khởi động bên ngoài nào cho vấn đề đó. Nhập Angular hoạt động tốt).

Đây là những gì tôi có trong tệp app.js của mình.

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); 

và webpack.config.js tập tin của tôi:

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" 
    }) 
    ] 
}; 

tôi không nhận được bất kỳ lỗi nào về việc không thể tìm thấy những tập tin javascript Tôi cố gắng để nhập khẩu (bootstrap.min.js, dataTables.bootstrap .js, vv), tuy nhiên nó dường như không sử dụng chúng.

Trong tệp html của tôi có nghĩa vụ phải sử dụng datatable, có vẻ như nó chỉ kéo từ css, và không có gì đang được áp dụng cho nó từ các tệp 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> 

Tôi có thiếu gì đó ở đây không? Thật khó để tìm ra giải pháp cho trực tuyến này vì không có nhiều người dường như đang sử dụng Angular với ES6 và Webpack.

Answer 1

Điều này làm tôi phát điên, vì vậy hy vọng điều này sẽ giúp một chút ... về cơ bản, tôi đã nhập mọi thứ thông qua NPM như tôi có thể, sau đó theo cách thủ công khác. Xem trang web này cho một số chi tiết kỹ thuật về những gì các module cần thiết:

http://datatables.net/download/npm

Sau khi làm việc qua nó, nó dường như giống như Webpack/ES6 phong cách/bó không trên ngang hàng với cách mã như Phản ứng (hoặc có thể Góc 2) hoạt động.

Đầu tiên, mã này dựa trên bộ khởi động NG6-Angular/Webpack/ES6. Dưới đây là file app.js ... slighty tỉa:

import angular from 'angular'; 
import 'angular-flot'; 
import 'angular-datatables'; 
import 'angular-breadcrumb'; 
import 'angular-sweetalert'; 
import 'datatables.net-bs'; 
import 'flot'; 
import ngAnimate from 'angular-animate'; 
import ngCookies from 'angular-cookies'; 
import ngFileUpload from 'ng-file-upload'; 
import ngResource from 'angular-resource'; 
import ngSanitize from 'angular-sanitize'; 
import ngTouch from 'angular-touch'; 
import 'restangular'; 
import satellizer from 'satellizer'; 
import toastr from 'angular-toastr'; 
import uiBootstrap from 'angular-bootstrap-npm'; 
import uiRouter from 'angular-ui-router'; 
import 'angular-ui-router-title'; 
import 'api-check'; 
import './externals'; 

import Common from './common/common'; 
import Components from './components/components'; 
import component from './app.component'; 
import AppRun from './app.run'; 
import AppConfig from './app.config'; 

const nameNormalized = 'app'; 

angular 
    .module(nameNormalized, [ 
     'angular-flot', 
     'datatables', 
     'datatables.bootstrap', 
     'datatables.buttons', 
     'formly', 
     'formlyBootstrap', 
     'ncy-angular-breadcrumb', 
     ngAnimate, 
     ngCookies, 
     ngFileUpload, 
     ngResource, 
     ngSanitize, 
     ngTouch, 
     'oitozero.ngSweetAlert', 
     'restangular', 
     satellizer, 
     toastr, 
     uiBootstrap, 
     'ui.footable', 
     uiRouter, 
     'ui.router.title', 
     Common.name, 
     Components.name 
    ]) 
    .config(AppConfig) 
    .directive(nameNormalized, component()) 
    .run(AppRun) 
; 

Và đây là externals tập tin đó được nhập khẩu trên:

import 'script!../node_modules/api-check/dist/api-check.min.js'; 
import 'script!../node_modules/angular-formly/dist/formly.min.js'; 
import 'script!../node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js'; 
import 'imports?jQuery=jquery!../node_modules/metismenu/dist/metisMenu.min.js'; 
import 'imports?$=jquery!../bower_components/angular-footable/src/angular-footable.js'; 
import 'imports?$=jquery!../bower_components/angular-footable/src/angular-footable.js'; 
import 'imports?$=jquery!../bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js'; 
import 'imports?$=jquery!../bower_components/jquery.flot.time.js/index.js'; 
import 'imports?$=jquery!./externals/jquery.ba-resize.js'; 
import 'imports?jQuery=jquery!./externals/jquery.flot.resize.js'; 
import 'imports?$=jquery!./externals/inspinia.js'; 

Và đây là cấu hình Webpack ... nó không lột xuống, nhưng có lẽ đó là ưa thích:

import autoprefixer from 'autoprefixer'; 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import CopyWebpackPlugin from 'copy-webpack-plugin'; 
import path from 'path'; 
import webpack from 'webpack'; 
import _ from 'lodash'; 

let plugins = [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.ProvidePlugin({ 
     _: 'lodash', 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     'window.$': 'jquery' 
    }), 
    new CopyWebpackPlugin([ 
     {from: './assets/img/favicons', to: 'assets/img/favicons'} 
    ]) 
]; 

let cssMinimize = ''; 
let htmlMinify = {}; 
let extractStyles = false; 

if(process.env.NODE_ENV === 'production') { 
    /* 
     Production uglify disabled for now: 
     https://github.com/webpack/webpack/issues/1079 
     https://github.com/webpack/webpack/pull/560#issuecomment-66818521 
     Possible workaround for future: 
     https://www.npmjs.com/package/uglify-loader 
     plugins.push(new webpack.optimize.UglifyJsPlugin({ 
      compress: {warnings: true}, 
      sourceMap: false, 
      mangle: false, 
      exclude: [/bower_components/, /node_modules/] 
     })); 
    */ 

    htmlMinify = { 
     removeComments: true, 
     collapseWhitespace: true, 
     conservativeCollapse: true, 
     preserveLineBreaks: false, 
     keepClosingSlash: true 
    }; 

    cssMinimize = 'minimize'; 
} 

module.exports = o => ({ 
    context: path.join(__dirname, '/src'), 
    entry: {app: getEntry(o)}, 
    eslint: {configFile: './.eslintrc'}, 
    module: { 
     loaders: [ 
      { 
       test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, 
       loader: 'url?limit=1000000' 
      }, 
      { 
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|xml|ico)$/, 
       loader: 'file?name=[path][name].[ext]' 
      }, 
      {test: /\.json$/, loader: 'json'}, 
      { 
       test: /\.js$/, 
       loader: 'ng-annotate!babel?presets[]=es2015,presets[]=stage-0', 
       exclude: [/bower_components/, /node_modules/] 
      }, 
      { 
       test: /\.js$/, 
       loader: 'eslint', 
       exclude: [/bower_components/, /node_modules/] 
      }, 
      { 
       test: /\.styl$/, 
       loader: getStyleLoader(_.merge({extra: '!stylus'}, o)) 
      }, 
      { 
       test: /\.less$/, 
       loader: getStyleLoader(_.merge({extra: '!less'}, o)) 
      }, 
      { 
       test: /\.css$/, 
       loader: getStyleLoader(_.merge({extra: ''}, o)) 
      }, 
      { 
       test: /\.html$/, 
       loader: 'ngtemplate?relativeTo=' + 
        (path.resolve(__dirname, '/src')) + '/!html' 
      } 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, '/dist'), 
     publicPath: '/', 
     filename: '[name].js' 
    }, 
    plugins: getPlugins(o), 
    postcss: [autoprefixer({browsers: ['last 2 versions']})] 
}); 

function getStyleLoader(o) { 
    const ending = 'css?' + cssMinimize + '!postcss' + o.extra; 

    if(o.watch) { 
     return 'style!' + ending; 
    } else { 
     return ExtractTextPlugin.extract('style', ending); 
    } 
} 

function getPlugins(o) { 
    if(!o.watch) { 
     plugins.push(new ExtractTextPlugin('[name].css')); 
    } else { 
     plugins.push(new webpack.HotModuleReplacementPlugin()); 
    } 

    plugins.push(new HtmlWebpackPlugin({ 
     filename: 'index.html', 
     hash: true, 
     minify: htmlMinify, 
     template: './src/index.html', 
     title: 'oa', 
     watch: o.watch 
    })); 

    return plugins; 
} 

function getEntry(o) { 
    let entry = ['./app']; 

    if(o.watch) { 
     entry.push('webpack/hot/dev-server'); 
    } 

    return entry; 
} 

Cuối cùng, sự phụ thuộc package.json

"dependencies": { 
    "angular": "~1.4.7", 
    "angular-animate": "~1.4.7", 
    "angular-bootstrap-npm": "^0.14.3", 
    "angular-breadcrumb": "^0.4.1", 
    "angular-cookies": "^1.4.8", 
    "angular-datatables": "^0.5.2", 
    "angular-flot": "0.0.15", 
    "angular-formly": "^7.3.5", 
    "angular-formly-templates-bootstrap": "^6.1.7", 
    "angular-resource": "~1.4.7", 
    "angular-route": "~1.4.7", 
    "angular-sanitize": "^1.4.8", 
    "angular-sweetalert": "^1.1.0", 
    "angular-toastr": "^1.6.0", 
    "angular-touch": "^1.4.8", 
    "angular-ui-router": "~0.2.15", 
    "angular-ui-router-title": "0.0.4", 
    "angular-ui-sortable": "~0.13.4", 
    "api-check": "^7.5.5", 
    "autoprefixer": "^6.1.0", 
    "babel-core": "^6.1.21", 
    "babel-eslint": "^4.1.5", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-stage-0": "^6.1.18", 
    "bootstrap": "^3.3.6", 
    "bower": "^1.7.1", 
    "copy-webpack-plugin": "^0.3.3", 
    "css-loader": "^0.22.0", 
    "datatables.net": "^1.10.10", 
    "datatables.net-bs": "^1.10.10", 
    "datatables.net-buttons": "^1.1.0", 
    "datatables.net-buttons-bs": "^1.1.0", 
    "drmonty-datatables-responsive": "^1.0.6", 
    "eslint": "^1.9.0", 
    "eslint-loader": "^1.1.1", 
    "extract-text-webpack-plugin": "^0.9.1", 
    "file-loader": "^0.8.5", 
    "flot": "^0.8.0-alpha", 
    "gulp": "^3.9.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-template": "^3.1.0", 
    "gulp-util": "^3.0.7", 
    "html-loader": "^0.4.0", 
    "html-webpack-plugin": "^1.7.0", 
    "imports-loader": "^0.6.5", 
    "jquery": "^2.1.4", 
    "json-loader": "^0.5.4", 
    "less": "^2.5.3", 
    "less-loader": "^2.2.2", 
    "loader-utils": "^0.2.12", 
    "lodash": "^3.10.1", 
    "metismenu": "^2.2.0", 
    "ng-annotate-loader": "0.0.10", 
    "ng-file-upload": "^10.1.5", 
    "ngtemplate-loader": "^1.3.1", 
    "path": "^0.12.7", 
    "postcss-loader": "^0.8.0", 
    "raw-loader": "^0.5.1", 
    "restangular": "^1.5.1", 
    "satellizer": "^0.13.1", 
    "script-loader": "^0.6.1", 
    "source-map": "^0.5.3", 
    "style-loader": "^0.13.0", 
    "stylus-loader": "^1.4.2", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.6", 
    "webpack-dev-server": "^1.12.1", 
    "yargs": "^3.30.0" 
    } 

Answer 2

Tôi cũng cần phải yêu cầu mọi tệp, chú ý đến các tệp phụ không được tải tự động.

Package.json

"dependencies": { 
    "angular": "~1.5.8", 
    "angular-datatables": "^0.5.5", 
    "datatables.net": "^1.10.12", 
    "datatables.net-bs": "^1.10.12", 
    "datatables.net-buttons": "^1.2.2", 
    "datatables.net-buttons-bs": "^1.2.2", 
    "jquery": "~3.1.1", 
} 

core.module.js

import 'jquery'; //jQuery has to be load before AngularJS 
import angular from 'angular'; 

import 'angular-datatables'; 
import 'datatables.net'; 
import 'datatables.net-bs'; 
import 'datatables.net-buttons'; 
import 'datatables.net-buttons-bs'; 
import 'datatables.net-buttons/js/buttons.colVis'; 
import 'datatables.net-buttons/js/buttons.flash'; 
import 'datatables.net-buttons/js/buttons.html5'; 
import 'datatables.net-buttons/js/buttons.print'; 
import 'angular-datatables/dist/plugins/buttons/angular-datatables.buttons'; 

import 'datatables.net-bs/css/dataTables.bootstrap.css'; 
import 'datatables.net-buttons-bs/css/buttons.bootstrap.css'; 

angular.module(MODULE_NAME, [ 
    'datatables', 
    'datatables.bootstrap', 
    'datatables.buttons', 
]); 

văn để cung cấp một câu trả lời rõ ràng hơn.