使用带角度+ webpack + es6的数据表
作者：我我檬檬我我186 | 2023-09-10 19:43
如何解决《使用带角度+webpack+es6的数据表》经验，为你挑选了1个好方法。
我似乎无法使用DataTables的JavaScript库(或任何外部引导程序javascript).Import 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文件应用它.
DataTables Advanced Tables
| Rendering engine |
Browser |
Platform(s) |
Engine version |
CSS grade |
| Trident |
Internet Explorer 4.0 |
Win 95+ |
4 |
X |
| Trident |
Internet Explorer 5.0 |
Win 95+ |
5 |
C |
| Trident |
Internet Explorer 5.5 |
Win 95+ |
5.5 |
A |
| Trident |
Internet Explorer 6 |
Win 98+ |
6 |
A |
| Trident |
Internet Explorer 7 |
Win XP SP2+ |
7 |
A |
| Trident |
AOL browser (AOL desktop) |
Win XP |
6 |
A |
| Gecko |
Firefox 1.0 |
Win 98+ / OSX.2+ |
1.7 |
A |
| Gecko |
Firefox 1.5 |
Win 98+ / OSX.2+ |
1.8 |
A |
| Gecko |
Firefox 2.0 |
Win 98+ / OSX.2+ |
1.8 |
A |
| Gecko |
Firefox 3.0 |
Win 2k+ / OSX.3+ |
1.9 |
A |
| Gecko |
Camino 1.0 |
OSX.2+ |
1.8 |
A |
| Gecko |
Camino 1.5 |
OSX.3+ |
1.8 |
A |
我在这里错过了什么吗？很难在网上找到解决方案,因为似乎没有多少人使用Angular与ES6和Webpack.
1> David Sincla..：
这让我疯了,所以希望这有点帮助......基本上,我最终通过NPM导入所有内容,然后手动输入.有关所需模块的一些规范,请访问此站点:
http://datatables.net/download/npm
在完成它之后,似乎Webpack/ES6 /捆绑样式与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"
}
京公网安备 11010802040832号 | 京ICP备19059560号-6