构建 JavaScript 时缺少模块答案

【问题标题】：Missing Module When Building JavaScript构建 JavaScript 时缺少模块
【发布时间】：2020-02-07 15:45:13
【问题描述】：

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

我错过了什么？

【问题讨论】：

根据docs，这应该可以工作：var moment = require('moment');

标签： laravel datetime bootstrap-4 momentjs tempus-dominus-datetimepicker

【解决方案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'
    })
  ]
};

第二个选项

另一种选择是通过将以下行添加到您的 index.js 主入口点文件中，使 moment 和 jQuery 在您的应用中全局可用：

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）。但那是另一回事了。

【讨论】：