Moment: Добавьте инструкции по использованию с помощью webpack

Я никогда не использовал Webpack, поэтому не уверен, что это будут за инструкции. Вы смогли разобраться? Если да, мы могли бы добавить ваши инструкции.

Спасибо за ответ.

Пока нет, но я буду держать вас в курсе.

Языковые файлы ищут модуль moment . Смотрите заголовок:

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

moment на самом деле правильное имя для этого модуля (см. package.json), и все работает, если вы устанавливаете его из npm.

@fernandoacorreia Ваша папка называется momentjs .

@icambron Почему бы не define(['../moment'], factory); , как в случае с CommonJs?

Было бы лучше, если бы порядок CommonJs и AMD был одинаковым в файлах lang и файле moment.js.

По умолчанию веб-пакет включает все языки из-за этого оператора require('./lang/' + k); . Вы можете переопределить это с помощью ContextReplacementPlugin :

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

@sokra Спасибо за объяснение несоответствия в определениях модулей. @icambron вы можете взглянуть на эти предложения?

Кстати, каталог называется momentjs , потому что я установил его, следуя приведенным здесь инструкциям:

bower install --save momentjs

Я объявляю путь при запросе, например require ('momentjs/min/moment-with-langs.js') .

хм, хорошо... это работает, если вы используете инструкции node.js.

@sokra Это помогает. Большое спасибо за отладку этого. Хотя я не хочу устанавливать его через npm; Я устанавливаю все свои внешние зависимости через Bower и ищу модули только в bower_components .

@icambron Чтобы обновить инструкции, чтобы сделать его совместимым с веб-пакетом (и, предположительно, с другими загрузчиками модулей), в документации измените эту строку:

bower install --save momentjs

к:

bower install --save moment=momentjs

У меня сработали инструкции npm, но не bower install --save moment=momentjs

@Sigfried Как выглядит ваш файл bower.json ? У меня есть эта строка:

"moment": "momentjs#~2.5.1"

Мой webpack.config.js имеет:

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

Мне нужен момент как:

var moment = require('moment');

Я использую стандартную структуру каталогов Yeoman.

Это сделало это для меня. Спасибо!
(За исключением того, что я не использовал Yeoman, и теперь мне интересно, нужно ли мне начать это делать... Экосистема Javascript потрясающая, я провел последние три месяца, ничего не делая, кроме как экономя время! :)

Теперь вы можете использовать Bower install --save moment

@ichernev Звучит хорошо. В этом случае я считаю, что обновление документации «Где использовать это » решит эту проблему.

Немного поздно, но теперь можно использовать плагин для предоставления

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

Как предложил @sokra , я добавил следующий плагин, чтобы требовать только необходимую локаль. Также обратите внимание, что каталог lang в moment был изменен на locale .

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

Добавлен элемент документа как moment/momentjs.com#269. Будет отслеживать там.

Я использую es6, typescript и очень жесткие правила tslint. Вот что я сделал, чтобы получить момент в проекте:

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

Я только что создал пустую папку «locale» в той же папке, что и «moment.min.js», чтобы она включала все файлы js в этой папке.

Это хак, но он работает.

Для ленивой/динамической загрузки языков в Webpack вы можете использовать bundle-loader :

Шаг 1 - в конфигурации веб-пакета:

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

Шаг 2 - в клиентском коде:

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

В моем случае (webpack + npm install moment ) проблема заключалась в том, что webpack искал локали внутри папки src/lib/locale , потому что там собирались moment.js .

Я полностью удалил папку node_modules/moment/src и импортировал момент, устанавливая ее локаль, например:

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

Все работает отлично, никаких предупреждений, и только те локали, которые я импортирую явно, включаются в сборку (даже без использования webpack.ContextReplacementPlugin , как описано в этом комментарии , который я добавил сначала)

@micheleb фактической причиной поиска в этой подпапке является неправильная настройка jsnext:main в package.json $ в momentjs , которая соблюдается webpack 2.

jsnext:main должен _не_ указывать на необработанный исходный код, а на сборку модуля, которая использует синтаксис модуля ES6.

Это можно обойти, заменив псевдоним 'moment' на 'moment/moment.js' (общий «основной») в конфигурации вашего веб-пакета ( resolve: { alias: { moment: 'moment/moment.js' } } ).

РЕДАКТИРОВАТЬ: В качестве альтернативы использование ContextReplacementPlugin , которое использует данные локали из каталога src (т.е. которое запрашивает тот же модуль moment , что и jsnext:main ) похожий на:

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

Вероятно, это можно было бы написать без использования обратного вызова, но я хотел быть «более уверенным», что это применимо только к запросу ./locale внутри модуля moment .

Убедитесь, что request не указывает на ../../../locale ; в то время как это будет компилироваться, это приведет к тому, что будут объединены 2 целых копии moment .

@sokra , что произойдет, если async: true будет установлено в контексте? Я вижу, что модули генерируются как отдельные куски, если я это делаю, но каково ожидаемое поведение во время выполнения; авария? Я предполагаю, что это true «по умолчанию», если оно вызывается для обработки контекста require.ensure / System.import ?

это было исправлено? если нет, следует ли его снова открыть?

Почему это было закрыто? Это все еще актуальная проблема.

@ajohnsonRH

«Я считаю, что обновление документации решит эту проблему».

«Добавлен элемент документа как moment/momentjs.com#269. Будет отслеживаться там».

Итак, проблема была закрыта здесь, потому что она была заменена проблемой на веб-сайте документации Moment. Мы бы хотели, чтобы кто-нибудь написал там PR, чтобы решить moment/momentjs.com#269.

@butterflyhug

Это исправление сработало для меня:

1. сделать установку npm
2. откройте vendor.ts и добавьте строку import 'moment'

Для справки:
Использование Angular2 v2.0.0, Webpack ^ 1.13.0

Можно ли не включать все локали без добавления конфигураций в веб-пакет? Я использую приложение create-реагировать, и у меня нет возможности редактировать файл конфигурации веб-пакета.

Я ищу везде, и всегда кажется, что я добавляю строку конфигурации в webpack.
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

Согласен, я думаю, что локали должны быть только явными, а не неявными.

Это так очевидно, учитывая количество проблем, поднятых здесь в данный момент, в веб-пакете, в беседке, npm, и время, потраченное всеми на то, чтобы обойти это за несколько _years_.

@ajohnsonRH

Я установил пакеты npm, но когда я это делаю

импортировать момент из «момент-часовой пояс»;

момент всегда не определен. Как это?

У меня такая же проблема с использованием проекта Angular 2 CLI. Кто-нибудь уже нашел рабочее решение?

Также ищем подсказки для проекта Angular CLI

Любые подсказки для Angular CLI?

Как вы можете видеть, я спросил 4 месяца назад о CLI и не получил ответов, наше решение состояло в том, чтобы просто заменить moment на date-fns, и, поскольку мы также используем chartjs в нашем проекте и у него есть зависимость от момента, мы находимся в процессе заменив и это.

довольно хорошее решение
https://github.com/moment/momentjs.com/pull/489