构建JavaScript时缺少模块

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和模块捆绑器方面是没有维护的,而且还有点bug.我强烈建议你安装这两个插件.

我强烈建议你安装这两个fork。

• https:/www.npmjs.compackagetempusdominus
• https:/www.npmjs.compackagetempusdominus-bootstrap

npm i tempusdominus tempusdominus-bootstrap 

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

第一个选项

你的模块捆绑器是什么？

例如，如果您使用的是 滚动你可以使用Rollup的以下功能配置构建 @rollupplugin-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来说，你需要使用的是 提供Plugin:

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...

虽然我没有测试过，但这两个选项都应该能用（如果不能，请告诉我）.当然，首选的是使用模块捆绑器（第1个选项），而不是暴露于 jQuery 或 moment 到 window.

如果你正在使用React，我建议你使用这个库 此处 代替 此处). 但这是另一个故事。