在 webpack 的 js 文件中导入 moment.js

Question

在我的项目中，我使用了 webpack 和 npm。我安装了 moment.js： npm install moment 。然后我想将它导入我的 app.js 文件： import moment from "moment" 。

但它不起作用。我得到： 无法解决……

我尝试 let moment = require('moment'); 但我得到了同样的错误。

但是我可以在我的 webpack.config.js 文件中要求它而不会出错。

我的 app.js 文件位于 /myapp/frontend/app.js

我的 webpack.config.js 文件在： /myapp/webpack.config.js

所以，请解释为什么我不能在我的 app.js 中要求 moment 以及我该怎么做？

我的配置文件：

 const webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV || "development"
const path = require('path');

//example of successfull importing
let moment = require('moment');
console.log(moment(new Date()));

module.exports = {
    context: __dirname + "/frontend",
    entry: {
        app:"./app"
    },
    output: {
        path: path.resolve(__dirname,"./public/js"),
        publicPath:"/public/js/",//public path in internet
        filename: "build.js"
    },

    watch: NODE_ENV == "development",
    watchOptions:{
        aggregateTimeout:100//default = 300
    },
    devtool: NODE_ENV == "development"?"cheap-inline-module-source-map":"cheap-source-map",
                                      //cheap-inline-module-source-map - to see sources in build.js
                                      //eval - fastest

    resolve:{
        modules: ['node-modules'],
        extensions:['.js']
    },
    module:{
        loaders:[{
            test: /\.js$/,
            loader:"babel-loader?presets[]=es2015",
            exclude: /node_modules/
        }]
    }
};

if(NODE_ENV == "production"){
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                unsafe:true,
                drop_console:true
            }
        })
    );
}

这是我没有 node_modules 文件夹的树结构：

解决问题：问题出在我的配置中：

   resolve:{
            modules: ['node-modules'],
            extensions:['.js']
        },

有 node-modules 是错误的，必须是 node_modules 。简单的错别字。。

原文由 Yuriy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在不了解你的文件结构的情况下，很难确定原因，但问题可能是你的 webpack 配置没有在你的 node_modules 中找到 moment 模块。

作为测试，运行以下命令：

 //webpack.js
const path = require('path');

module.exports = {
  entry: path.join(__dirname, '..', 'public', 'js', 'index.js'),
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '..', 'public', 'dist'),
  },
};

然后通过 npm install --save jquery moment 安装了 moment 和 jquery，我制作了一个 index.js 文件：

 import $ from jquery;
import moment from moment;

const m = moment();

包含在 HTML 页面上时没有构建错误和运行时错误。尝试先简单地开始，然后在您的 webpack 配置上从那里开始构建。另外，我不确定 webpack 是否对 package.json 做了任何事情，但我注意到你没有发出 –save 选项的信号。养成好习惯。

原文由 Paul 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于我的问题，我已将 import {moment} from 'moment' 更改为 import * as moment from 'moment'; 现在可以使用了！

原文由 Tryliom 发布，翻译遵循 CC BY-SA 4.0 许可协议