在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中花时间，我该怎么做？

我的配置文件：

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。简单的错字

Answer 1

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

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

//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'),
  },
};

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

import $ from jquery;
import moment from moment;

const m = moment(); 

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

Answer 2

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