时间戳

首页 > 解决方案 > 学习 Webpack：如何在 webpack 中包含库并在浏览器中使用

javascript - 学习 Webpack：如何在 webpack 中包含库并在浏览器中使用

问题描述

我想这个问题一定被问过很多次了，但我找不到合适的答案。也许是因为我不正确地了解所有流行语......

因此，我尝试将捆绑用于一个新项目（以保持最新）并进行了一个小测试。我想使用 tailwindcss 和 datepicker（js-datepicker：https ://github.com/qodesmith/datepicker ）。

src/index.js：

import './styles.css'
import datepicker from 'js-datepicker'

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {importLoaders: 1}
                    },
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
}

现在我想在我的浏览器中使用日期选择器，所以我将生成的“bundle.js”包含在我的 HTML 中

但

const picker = datepicker('#someid')

生成错误：“ReferenceError：未定义日期选择器”

我错过了什么魔术？如果我查看生成的 bundle.js，我可以看到所有顺风样式和 datepicker 代码...

标签： javascriptwebpack

解决方案

您可以添加datepicker到window，然后您可以在浏览器中使用它。

在你的index.js文件中

import './styles.css'
import datepicker from 'js-datepicker'

// Add datepicker to window object
window.datepicker = datepicker;

推荐阅读