Moment: Agregar instrucciones de uso con webpack

Creado en 22 ene. 2014  ·  31Comentarios  ·  Fuente: moment/moment

Agregue a la sección Dónde usarlo instrucciones para integrar correctamente Moment.js con webpack .

require('momentjs/moment.js') provoca varios errores como este:

ERROR in ./app/bower_components/momentjs/lang/ar-ma.js
Module not found: Error: Cannot resolve module moment in /home/fernando/work/myproject/myproject-manage-app/app/bower_components/momentjs/lang
 @ ./app/bower_components/momentjs/lang/ar-ma.js 8:8-35

ERROR in ./app/bower_components/momentjs/lang/ar.js
Module not found: Error: Cannot resolve module moment in /home/fernando/work/myproject/myproject-manage-app/app/bower_components/momentjs/lang
 @ ./app/bower_components/momentjs/lang/ar.js 8:8-35

require ('momentjs/min/moment-with-langs.js') provoca esta advertencia:

WARNING in ./app/bower_components/momentjs/min/moment-with-langs.js
Module not found: Error: Cannot resolve file or directory ./lang in /home/fernando/work/myproject/myproject-manage-app/app/bower_components/momentjs/min
 @ ./app/bower_components/momentjs/min/moment-with-langs.js 808:24-46
Documentation

Comentario más útil

Como sugirió @sokra , agregué el siguiente complemento para requerir solo la configuración regional necesaria. También observe que el directorio lang en moment se ha cambiado a locale .

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ko|ja|zh-cn)$/)
]

Todos 31 comentarios

Nunca he usado Webpack, así que no estoy seguro de cuáles serían esas instrucciones. ¿Pudiste resolverlo? Si es así, podríamos agregar sus instrucciones.

Gracias por la respuesta.

Todavía no, pero los mantendré informados.

Los archivos de idioma buscan un módulo moment . Ver encabezado:

    if (typeof define === 'function' && define.amd) {
        define(['moment'], factory); // AMD

moment es en realidad el nombre correcto para este módulo (vea package.json) y todo funciona si lo instala desde npm.

@fernandoacorreia Tu carpeta se llama momentjs .

@icambron ¿Por qué no define(['../moment'], factory); como con CommonJs?

Sería mejor cuando el orden de CommonJs y AMD sea consistente en los archivos lang y el archivo moment.js.


Por defecto, el paquete web incluye todos los idiomas debido a esta declaración require('./lang/' + k); . Puede anular esto con ContextReplacementPlugin :

new webpack.ContextReplacementPlugin(/moment[\\\/]lang$/, /^\.\/(en-gb|de|pl)$/)

@sokra Gracias por explicar la inconsistencia en las definiciones de los módulos. @icambron ¿puedes echarle un vistazo a estas sugerencias?

Por cierto, el directorio se llama momentjs porque lo instalé siguiendo las instrucciones aquí :

bower install --save momentjs

Declaro el nombre de la ruta cuando lo requiero, como require ('momentjs/min/moment-with-langs.js') .

hmm ok... funciona si usas las instrucciones de node.js.

@sokra Eso ayuda. Muchas gracias por depurar esto. Aunque no quiero instalarlo a través de npm; Estoy instalando todas mis dependencias frontend a través de Bower y solo busco módulos en bower_components .

@icambron Para actualizar las instrucciones para que sea compatible con el paquete web (y, presumiblemente, con otros cargadores de módulos), en los documentos cambie esta línea:

bower install --save momentjs

para:

bower install --save moment=momentjs

Las instrucciones de npm me funcionaron, pero no bower install --save moment=momentjs

@Sigfried ¿Qué aspecto tiene su archivo bower.json ? El mio tiene esta linea:

"moment": "momentjs#~2.5.1"

Mi webpack.config.js tiene:

module.exports = {
  resolve: {
    alias: {
      moment: 'moment/moment.js',
    },
    modulesDirectories: ['app/bower_components']
  }
};

Estoy requiriendo momento como:

var moment = require('moment');

Estoy usando una estructura de directorio estándar de Yeoman.

Eso lo hizo por mí. ¡Gracias!
(Excepto que no estaba usando Yeoman y ahora me pregunto si necesito comenzar a hacerlo... El ecosistema de Javascript es increíble, ¡pasé los últimos tres meses sin hacer nada más que ahorrar tiempo! :)

Ahora puedes usar Bower install --save moment

@ichernev Eso suena bien. En este caso, creo que actualizar la documentación de Dónde usarlo resolvería este problema.

Un poco tarde en esto, pero ahora uno puede usar el complemento de provisión

    plugins: [
        new webpack.ProvidePlugin({
           "window.moment": "moment"
        }),
        new BowerWebpackPlugin()
    ]

Como sugirió @sokra , agregué el siguiente complemento para requerir solo la configuración regional necesaria. También observe que el directorio lang en moment se ha cambiado a locale .

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ko|ja|zh-cn)$/)
]

Se agregó un elemento de documento como moment/momentjs.com#269. Hará un seguimiento allí.

Estoy usando es6, mecanografiado y reglas tslint muy estrictas. Esto es lo que terminé haciendo para tener un momento en el proyecto:

import "expose?moment!imports?this=>window&exports=>false&define=>false!exports?window.moment!moment";

Acabo de crear una carpeta 'locale' vacía en la misma carpeta que 'moment.min.js', para que incluya todos los archivos js en esa carpeta.

Es un hack pero funciona.

Para cargar idiomas en Webpack perezoso/dinámicamente , puede usar con bundle-loader :

Paso 1: en la configuración del paquete web:

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // to not to load all locales

Paso 2 - en el código del cliente:

require('bundle!moment/locale/' + locale + '.js')(function () {
  moment().locale(locale).format('lll');
  // note that now you can use the locale even outside of this callback
});

En mi caso (webpack + npm install moment ), el problema era que el paquete web buscaba locales dentro de la carpeta src/lib/locale , porque ahí es donde se recogía moment.js .

Eliminé la carpeta node_modules/moment/src por completo e importé el momento configurando su configuración regional usando, por ejemplo:

import moment from 'moment';
import 'moment/locale/en-gb';
moment.locale('en-gb');

Todo funciona perfectamente, sin advertencias, y solo las configuraciones regionales que importo explícitamente se incluyen en la compilación (incluso sin usar webpack.ContextReplacementPlugin como se explica en este comentario , que agregué al principio)

@micheleb, la causa real para buscar en esa subcarpeta es la configuración incorrecta de jsnext:main en package.json de momentjs, que es respetado por el paquete web 2.

jsnext:main _no_ debe apuntar al código fuente sin procesar, sino a una compilación del módulo que sí usa la sintaxis del módulo ES6.

Esto se puede solucionar asignando un alias de 'moment' a 'moment/moment.js' (el commonjs "principal") en la configuración de su paquete web ( resolve: { alias: { moment: 'moment/moment.js' } } ).

EDITAR: Alternativamente, un uso de ContextReplacementPlugin que usa los datos locales del directorio src (es decir, que solicita el mismo módulo moment que jsnext:main ) es Similar a:

new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
  if (!/\/moment\//.test(context.context)) { return }
  // context needs to be modified in place
  Object.assign(context, {
    // include only CJK
    regExp: /^\.\/(ja|ko|zh)/,
    // point to the locale data folder relative to moment's src/lib/locale
    request: '../../locale'
  })
}),

Esto probablemente podría escribirse sin usar la devolución de llamada, pero quería estar "más seguro" de que esto solo se aplicaría a una solicitud de ./locale dentro del módulo moment .

Asegúrese de que request no apunte a ../../../locale ; mientras que se compilará, resultará en 2 copias completas de moment que se empaquetan.

@sokra, ¿qué sucede si async: true se establece en el contexto? Puedo ver que los módulos se generan como fragmentos separados si hago eso, pero ¿cuál es el comportamiento de tiempo de ejecución esperado? ¿un choque? Supongo que es true "por defecto" si se llama para manejar un contexto require.ensure / System.import .

esto fue arreglado? si no, ¿debería volver a abrirse?

¿Por qué se cerró esto? Esto sigue siendo un problema que ocurre.

@ajohnsonRH

"Creo que actualizar la documentación resolvería este problema".

"Se agregó un elemento de documento como moment/momentjs.com#269. Se rastreará allí".

Entonces, el problema se cerró aquí porque fue reemplazado por un problema en el sitio web de documentación de Moment. Nos encantaría que alguien escribiera un PR allí para resolver moment/momentjs.com#269.

@butterflyhug

Esta solución funcionó para mí:

  1. hacer la instalación de npm
  2. abra vendor.ts y agregue la línea import 'moment'

Para referencia:
Usando Angular2 v2.0.0, paquete web ^ 1.13.0

¿Es posible no incluir toda la configuración regional sin agregar configuraciones al paquete web? Estoy usando create-react-app y no tengo la capacidad de editar el archivo de configuración del paquete web.

Busco en todas partes y siempre parece volver a agregar una línea de configuración en el paquete web.
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

De acuerdo, creo que requerir las configuraciones regionales debe ser solo explícito, nunca implícito.

Es tan obvio de acuerdo con la cantidad de problemas planteados aquí en moment, en webpack, en bower, npm y el tiempo dedicado por todos para eludirlo desde hace varios _años_.

@ajohnsonRH

Instalé paquetes npm, pero cuando lo hago

Importar momento desde 'moment-timezone';

El momento es siempre indefinido. ¿Cómo esa?

Tengo este mismo problema con el proyecto Angular 2 CLI. ¿Alguien ha encontrado una solución que funcione todavía?

Buscando pistas para un proyecto CLI angular también

¿Alguna pista para Angular CLI?

Como puede ver, pregunté hace 4 meses sobre la CLI y no obtuve respuestas, nuestra solución fue simplemente reemplazar moment con date-fns, y dado que también estamos usando chartjs en nuestro proyecto y tiene una dependencia de momento, estamos en el proceso de reemplazando eso también.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

IbraheemAlSaady picture IbraheemAlSaady  ·  3Comentarios

alvarotrigo picture alvarotrigo  ·  3Comentarios

Shoroh picture Shoroh  ·  3Comentarios

Delgan picture Delgan  ·  3Comentarios

benhathaway picture benhathaway  ·  3Comentarios