1

我正在 Laravel 中构建一个内部工具，我需要一个日期时间选择器来获取部分界面。我的研究表明，Tempus Dominus 是大多数人用来解决这个问题的解决方案。

我已经安装了 Tempus Dominus 和 Moment（通过 Node）并将它们都添加到我的app.js文件中。但是，当我尝试编译 JS 时，我收到以下警告：

WARNING in ./node_modules/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in 'C:\inetpub\wwwroot\salesdb\node_modules\moment\min'
 @ ./node_modules/moment/min/moment.min.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

这就是我在app.js文件中导入它们的方式：

require('moment/min/moment.min.js');
require( 'tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js');

我错过了什么？

4

1 回答 1

1

官方的 Tempus Dominus Bootstrap 插件没有维护，并且在涉及 ES6 和模块捆绑器时有点错误。

我强烈建议您安装这两个叉子：

npm i tempusdominus tempusdominus-bootstrap

如果你想让它工作，你应该在你的应用程序的最终构建中注入/提供moment和导入（第一个选项），或者让它们在全球范围内可用（第二个选项）。jquery

第一个选项

你的模块捆绑器是什么？

例如，如果您使用的是Rollup，您可以使用 Rollup 的@rollup/plugin-inject插件来配置构建：

// Your imported plugins...
import inject from "@rollup/plugin-inject";

export default {
  input: "src/index.js",
  output: [
    // You outputs...
  ],
  plugins: [
    inject({
      $: "jquery",
      jQuery: "jquery",
      moment: "moment",
      exclude: "src/**",
    }),
    // Your other Rollup plugins here...
  ],
};

对于 Webpack，您需要使用ProvidePlugin：

const webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: { 
    filename: '[name].js' 
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
      moment: 'moment'
    })
  ]
};

第二个选项

另一种选择是通过将以下行添加到您的主入口点文件中来使您moment的应用程序在全球范围内可用：jQueryindex.js

import moment from "moment";
import $ from "jquery";

window.$ = window.jQuery = $;
window.moment = moment;

// Your other imports (tempusdominus-bootstrap as well) go here...

虽然我没有测试，但两个选项都应该有效（如果没有，请告诉我）。当然，首选的是使用模块捆绑器（第一个选项），而不是暴露和jQuery/或.momentwindow

如果你使用 React，我建议你在这里使用这个库（demo here）。但那是另一回事了。

于 2020-05-20T15:55:16.277 回答