Ich habe ein Aspnet-Core-Spa-Projekt mit reagieren mit Dotnet Core Spa Stater Vorlage erstellt. Ich verwende die Standard-Webpack-Konfiguration, die mit dieser Stater-Vorlage geliefert wurde. Ich habe versucht, Bootstrap-Datumsauswahl einzubeziehen.bootstrap datepicker funktioniert nicht mit Webpack
Ich habe versucht mit: npm i bootstrap-datepicker Hinzufügen zum Einstiegspunkt und Importieren von Boot.tsx. Es gibt mir: $ (...) picker ist keine Funktion
ich die gleichen Ergebnisse mit bekam. npm i eonasdan-Bootstrap-Datetime
Ich habe versucht, mit: npm bootstrap- installieren Datepicker picker~~POS=HEADCOMP-webpack Es hat mir geben: jQuery ist nicht definiert
Es folgt mein webpack.config.vendor.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
resolve: {
extensions: ['.js'],
alias: {
jquery: Path.join(__dirname, 'node_modules/jquery/dist/jquery')
}
},
module: {
rules: [
{ test: /\.(svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, use: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) },
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
},
entry: {
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router-dom', 'jquery', 'font-awesome-webpack', 'bootstrap-datepicker'],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: '/dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
}];
};
Es folgt mein webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { 'main': './ClientApp/boot.tsx' },
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: '/dist/'
},
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'file-loader?name=[name].[ext]&outputPath=img/' },
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
},
plugins: [
new CheckerPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
In der boot.tsx Datei ich die Einfuhren wie folgt definiert sind:
import './css/site.css';
import './css/AdminLTE.css';
import './css/skin-black.css';
import 'jquery';
import './js/morris.js';
import './js/app.js';
import './js/dashboard.js';
import './js/demo.js';
import 'font-awesome-webpack';
import 'bootstrap';
import 'bootstrap-datepicker';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter } from 'react-router-dom';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
Abgesehen von dem, was ich erwähnt habe, ich habe versucht, die Pakete zu importieren In meiner webpack.config.js habe ich versucht, die js und CSS-Dateien separat zu importieren. Nichts hat geklappt. Ich bekomme den gleichen Fehler. Ich habe versucht, die 3 Pakete zu importieren, die ich oben erwähnt habe (die Dateien zeigen nur bootstrap-datepicker, aber ich habe versucht, alle 2 Pakete hinzuzufügen). Nichts hat geklappt.
Ein weiteres Problem, das ich sehe, ist, wenn ich so
var jQuery = $ = require('jQuery');
in meinem benutzerdefinierten js Dateien nicht jquery importiere, ist es, dass Jquery beschwert nicht definiert, obwohl es die webpack.ProvidePlugin exportiert wird mit . Ich weiß nicht, ob es ein verwandtes Problem ist.
Das Hinzufügen von Alias zur Konfigurationsdatei ist ein Fix, den ich in Github gefunden habe. Ich habe es mit und ohne versucht, immer noch den gleichen Fehler. Irgendwelche Lösungen?