在Webpack的js文件中导入moment.js [英] Import moment.js in js file in webpack

问题描述

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

In my project I use webpack and npm. I installed moment.js : npm install moment. Then I want to import it in my app.js file: import moment from "moment".

但是它不起作用.我得到:无法解决...

But it doesn't work. I get: Can't resolve moment in ...

我尝试let moment = require('moment');，但出现相同的错误.

I try let moment = require('moment');but I get the same error.

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

But I can require it in my webpack.config.js file without errors.

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

My app.js file is located on /myapp/frontend/app.js

我的webpack.config.js文件位于:/myapp/webpack.config.js

My webpack.config.js file on:/myapp/webpack.config.js

所以，请解释为什么我不需要在我的app.js中花时间，我该怎么做?

So, please explain why I can't require moment in my app.js and how can I do this?

我的配置文件:

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文件夹的树结构:

It is my tree structure without node_modules folder:

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

SOLVING OF PROBLEM: problem was in my configuration:

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

有node-modules是错误的，必须为node_modules.简单的错字..

There is node-modules is wrong, must be node_modules. Simple typo..

推荐答案

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

Without knowing a bit more about your file structure it's difficult to be certain as to why, but the issue is probably that your webpack config is not finding the moment module in your node_modules.

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

As a test, ran the following:

//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文件:

and then with moment and jquery installed via npm install --save jquery moment, I made a index.js file:

import $ from jquery;
import moment from moment;

const m = moment(); 

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

No build errors and no runtime errors when included on the HTML page. Try starting simply first and then build up from there on your webpack config. Also, I'm not sure if webpack does anything with package.json but I noticed you didn't signal the --save option. It's a good habit to get into.

这篇关于在Webpack的js文件中导入moment.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！