个人中心
gpt4 book ai didi

angularjs - 使用 Angular + Webpack + es6 的数据表

转载 作者：行者123 更新时间：2023-12-02 22:35:02 26 4
gpt4 key购买 nike

我似乎无法使用 DataTables 的 javascript 库(或任何与此相关的外部 Bootstrap javascript。导入 Angular 工作正常)。

这就是我的 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 文件中，看起来它只是从 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 一起使用。

最佳答案

这让我发疯，所以希望这能有所帮助......基本上，我最终尽可能通过 NPM 导入所有内容，然后手动导入。请参阅此站点，了解有关所需模块的一些规范:

http://datatables.net/download/npm

经过研究后，Webpack/ES6/bundling 风格确实与 React(或者可能是 Angular 2)等代码的工作方式不符。

首先，此代码基于 NG6-Angular/Webpack/ES6 启动器。这是 app.js 文件...稍作修改:

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

这是上面导入的 externals 文件:

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

这是 Webpack 配置...它没有被精简，但也许这是首选:

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

最后，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"
  }

关于angularjs - 使用 Angular + Webpack + es6 的数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34141365/

26 4 0
文章推荐： ember.js - 使用 Ember.js 在一条 route 实现多步骤形式(或多个 "pages")
文章推荐： javascript - 如何在 FlatList 中的项目之间切换？
文章推荐： javascript - Window 对象是否有获取/设置键的方法？
文章推荐： wordpress - WooCommerce 页面显示为空白
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com