引导日期选择器不适用于 Webpack

Posted 2023-05-07

【中文标题】引导日期选择器不适用于 Webpack

【英文标题】：Bootstrap datepicker not working with Webpack

【发布时间】：2018-01-15 02:27:14

【问题描述】：

我使用 dotnet core spa stater 模板创建了一个带有 react 的 aspnet core spa 项目。我正在使用该 stater 模板附带的默认 webpack 配置。我试图包括引导日期选择器。

我尝试过： npm 我引导日期选择器 将其添加到入口点并从 boot.tsx 导入。 它给了我： $(...).datepicker 不是函数

我得到了相同的结果： npm i eonasdan-bootstrap-datetimepicker

我尝试过： npm install bootstrap-datepicker-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】：

让我们再次尝试让事情变得简单。

1- 如果一个库不符合您的需要，在添加/安装它之后，您应该删除它以避免堆叠大量未使用的库。

如果您使用 npm 运行：npm uninstall --save moduleName。 --保存 更新你的 package.json 参数，别忘了。

如果您使用的是yarn，请运行：yarn remove moduleName

2- 每次都尝试寻找内置 react 的库，可能在大多数情况下有一个适合您需要的库。

建议 -> https://github.com/Hacker0x01/react-datepicker/

3- 按照第 2 项中的建议：

您需要分别安装 React 和 Moment.js，因为这些依赖项不包含在包中。下面是一个关于如何在 React 视图中使用 Datepicker 的简单示例。

我希望它对您的问题有所帮助。

【参考方案2】：

这对我有用（使用 es6/babel/webpack）：

1) 将提供插件添加到 webpack 配置中

new webpack.ProvidePlugin(
      $: 'jquery',
      jQuery: 'jquery'
    )

2) 从 node_modules 导入脚本文件

    import '../../../../../node_modules/
bootstrap-datepicker/dist/js/bootstrap-datepicker';

（路径需要调整）

【讨论】：

它对我有用，但重要的是删除手工导入的 jquery。