Bootstrap datepicker不能与Webpack一起工作
我已经创建了一个aspnet核心spa项目,使用dotnet核心spa stater模板进行反应。我正在使用该预设模板附带的默认webpack配置。我试图包括引导日期选择器。Bootstrap datepicker不能与Webpack一起工作
我试过: npm我bootstrap-datepicker 将它添加到入口点并从boot.tsx导入它。 它给我: $(...)日期选择器是不是一个函数
我得到了相同的结果: NPM我eonasdan自举-的DateTimePicker
我试着用: NPM安装bootstrap-日期选择器-的WebPack 它给我: jQuery是没有定义
以下是我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()
])
}];
};
以下是我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')
])
}];
};
在boot.tsx文件我已经定义了进口这样的:
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;
除了我所提到的,我曾尝试导入包在我的webpack.config.js中,我尝试单独导入js和css文件。没有工作。我收到了同样的错误。我尝试导入上面提到的3个软件包(文件只显示bootstrap-datepicker,但我试图添加所有2个软件包)。没有工作。
我看到的另一个问题是,如果我不进口的jQuery这样
var jQuery = $ = require('jQuery');
在我的自定义JS文件
,它的抱怨是jQuery是没有定义的,尽管它使用的是webpack.ProvidePlugin出口。我不知道这是否是一个相关问题。
向配置文件添加别名是我在github中找到的修复程序。我尝试过,没有它,仍然得到相同的错误。任何解决方案
让我们再次尝试使事情变得简单。
1-如果一个库不适合您的需求,添加/安装后您应该删除以避免堆栈大量未使用的库。
如果您使用npm run:npm uninstall --save moduleName
。 --save 参数更新您的package.json,不要忘记它。
如果您正在使用yarn运行:yarn remove moduleName
2-想尽一切时间去寻找那些内置的反应库,可能是在大多数情况下有适合您需要的库。
建议 - >https://github.com/Hacker0x01/react-datepicker/
3-继第2项建议:
你需要进行安装,因为这些依赖不包含在包中单独反应,Moment.js。以下是关于如何在React视图中使用Datepicker的简单示例。
我希望它以任何方式帮助您解决问题。
这为我工作(使用ES6 /巴贝尔/的WebPack):
1)提供的插件添加到的WebPack配置
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
2)导入从node_modules脚本文件
import '../../../../../node_modules/
bootstrap-datepicker/dist/js/bootstrap-datepicker';
(您的路径需要调整)