Question

在我的项目中，我使用webpack和npm。我安装了moment.js：string return_value(int index) { string temp = ""; switch (index) { case 1: temp = "hi" break; case 2: temp = "bye"; break; defualt : break; } return temp; }。然后我想在我的app.js文件中导入它：npm install moment。

但它不起作用。我明白了：无法解决......

我尝试import moment from "moment"但我得到同样的错误。

但是我可以在我的webpack.config.js文件中要求它没有错误。

我的app.js文件位于let moment = require('moment');

我的webpack.config.js文件：/myapp/frontend/app.js

那么，请解释为什么我的app.js中不需要时刻，我该怎么做？

我的配置文件：

/myapp/webpack.config.js

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

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

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
            }
        })
    );
}

resolve:{ modules: ['node-modules'], extensions:['.js'] },错误，必须是node-modules。简单错字..

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选项的信号。进入是一个很好的习惯。

Answer 2

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

Answer 3

就我而言，当我输入 window.moment = require('moment');

时，问题已解决

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

3 个答案: