Question

我正在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');

我想念什么？

Answer 1

官方的Tempus Dominus Bootstrap插件无需维护，在ES6和模块捆绑器中也很麻烦。

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

npm i tempusdominus tempusdominus-bootstrap

如果您想使其工作，则应在应用程序的最终版本中注入/提供moment和jquery导入（第一个选项），或使其全局可用（第二个选项）。 / p>

第一个选项

什么是模块捆绑器？

例如，如果您使用的是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主入口点文件中添加以下行，使jQuery和index.js在您的应用程序中全局可用：

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

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

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

尽管我没有进行测试，但这两个选项都应该起作用（如果没有，请告诉我）。当然，首选的方法是使用模块捆绑程序（第一个选项），而不要将jQuery和/或moment暴露给window。

如果您使用的是React，建议您改用here这个库（演示here）。但这是另一个故事。

构建JavaScript时缺少模块

1 个答案:

第一个选项

第二个选项