Moment: Tambahkan petunjuk penggunaan dengan webpack

Saya belum pernah menggunakan Webpack, jadi saya tidak yakin seperti apa instruksi itu. Apakah Anda bisa mengetahuinya? Jika demikian, kami dapat menambahkan instruksi Anda.

Terima kasih balasannya.

Belum, tapi saya akan terus mengabari Anda.

File bahasa mencari modul moment . Lihat tajuk:

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

moment sebenarnya adalah nama yang tepat untuk modul ini (lihat package.json) dan semuanya berfungsi jika Anda menginstalnya dari npm.

@fernandoacorreia Folder Anda bernama momentjs .

@icambron Mengapa tidak define(['../moment'], factory); seperti CommonJs?

Akan lebih baik jika urutan CommonJs dan AMD konsisten dalam file lang dan file moment.js.

Secara default webpack menyertakan semua bahasa karena pernyataan ini require('./lang/' + k); . Anda dapat menimpa ini dengan ContextReplacementPlugin :

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

@sokra Terima kasih telah menjelaskan tentang inkonsistensi dalam definisi modul. @icambron dapatkah Anda melihat saran ini?

Omong-omong, direktorinya bernama momentjs karena saya menginstalnya mengikuti petunjuk di sini :

bower install --save momentjs

Saya mendeklarasikan nama path saat membutuhkan, seperti require ('momentjs/min/moment-with-langs.js') .

hmm ok... itu berfungsi jika Anda menggunakan instruksi node.js.

@sokra Itu membantu. Terima kasih banyak untuk men-debug ini. Meskipun saya tidak ingin menginstalnya melalui npm; Saya menginstal semua dependensi frontend saya melalui bower dan saya hanya mencari modul di bower_components .

@icambron Untuk memperbarui instruksi agar kompatibel dengan webpack (dan, mungkin, pemuat modul lainnya), di dokumen ubah baris ini:

bower install --save momentjs

ke:

bower install --save moment=momentjs

Instruksi npm bekerja untuk saya, tetapi tidak bower install --save moment=momentjs

@Sigfried Seperti apa file bower.json Anda? Milik saya memiliki baris ini:

"moment": "momentjs#~2.5.1"

webpack.config.js saya memiliki:

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

Saya membutuhkan momen sebagai:

var moment = require('moment');

Saya menggunakan struktur direktori Yeoman standar.

Itu berhasil untuk saya. Terima kasih!
(Kecuali saya tidak menggunakan Yeoman dan sekarang saya bertanya-tanya apakah saya harus mulai melakukan itu... Ekosistem Javascript luar biasa, saya telah menghabiskan tiga bulan terakhir tidak melakukan apa-apa selain menghemat waktu! :)

Sekarang Anda dapat menggunakan bower install --save moment

@ichernev Kedengarannya bagus. Dalam hal ini, saya percaya bahwa memperbarui dokumentasi Tempat menggunakannya akan menyelesaikan masalah ini.

Agak terlambat dalam hal ini, tetapi sekarang seseorang dapat menggunakan plugin yang disediakan

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

Seperti yang disarankan @sokra , saya telah menambahkan plugin berikut untuk hanya membutuhkan lokal yang diperlukan. Perhatikan juga bahwa direktori lang di moment telah diubah menjadi locale .

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

Menambahkan item dokumen sebagai moment/momentjs.com#269. Akan melacak di sana.

Saya menggunakan es6, TypeScript, dan aturan tslint yang sangat ketat. Inilah yang akhirnya saya lakukan untuk mendapatkan momen ke dalam proyek:

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

Saya baru saja membuat folder 'locale' kosong di folder yang sama dengan 'moment.min.js', sehingga mencakup semua file js di folder itu.

Ini adalah peretasan tetapi berhasil.

Untuk memuat bahasa di Webpack lazy / secara dinamis Anda dapat menggunakannya dengan bundle-loader :

Langkah 1 - dalam konfigurasi webpack:

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

Langkah 2 - dalam kode klien:

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

Dalam kasus saya (webpack + npm install moment ) masalahnya adalah webpack mencari lokal di dalam folder src/lib/locale , karena di situlah moment.js diambil.

Saya menghapus folder node_modules/moment/src sama sekali, dan mengimpor saat mengatur lokalnya menggunakan mis:

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

Semuanya berfungsi dengan baik, tidak ada peringatan, dan hanya lokal yang saya impor secara eksplisit yang disertakan dalam build (bahkan tanpa menggunakan webpack.ContextReplacementPlugin seperti yang dijelaskan dalam komentar ini , yang saya tambahkan pada awalnya)

@micheleb penyebab sebenarnya untuk mencari di subfolder itu adalah pengaturan yang salah dari jsnext:main di momentjs's package.json , yang dihormati oleh webpack 2.

jsnext:main harus _tidak_ menunjuk ke kode sumber mentah, tetapi ke build modul yang menggunakan sintaks modul ES6.

Ini dapat diatasi dengan aliasing 'moment' ke 'moment/moment.js' ("main" commonjs) di konfigurasi webpack Anda ( resolve: { alias: { moment: 'moment/moment.js' } } ).

EDIT: Atau, penggunaan ContextReplacementPlugin yang menggunakan data lokal dari direktori src (yaitu yang meminta modul moment yang sama dengan jsnext:main ) adalah mirip dengan:

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

Ini mungkin dapat ditulis tanpa menggunakan panggilan balik, tetapi saya ingin "lebih yakin" bahwa ini hanya berlaku untuk permintaan ./locale #$11$#$ di dalam modul moment .

Pastikan request tidak mengarah ke ../../../locale ; sementara itu akan dikompilasi, itu akan menghasilkan 2 salinan keseluruhan dari moment yang dibundel.

@sokra apa yang terjadi jika async: true diatur dalam konteks? Saya dapat melihat bahwa modul dihasilkan sebagai potongan terpisah jika saya melakukannya, tetapi apa perilaku runtime yang diharapkan; kecelakaan? Saya berasumsi itu adalah true "secara default" jika dipanggil untuk menangani konteks require.ensure / System.import ?

apakah ini sudah diperbaiki? jika tidak, apakah harus dibuka kembali?

Mengapa ini ditutup? Ini masih menjadi masalah yang terjadi.

@ajohnsonRH

"Saya percaya bahwa memperbarui dokumentasi akan menyelesaikan masalah ini."

"Menambahkan item dokumen sebagai moment/momentjs.com#269. Akan dilacak di sana."

Jadi, masalah ditutup di sini karena telah digantikan oleh masalah di situs web dokumentasi Moment. Kami ingin seseorang menulis PR di sana untuk menyelesaikan moment/momentjs.com#269.

@butterflyhug

Perbaikan ini berhasil untuk saya:

1. lakukan instal npm
2. buka vendor.ts dan tambahkan baris import 'moment'

Sebagai referensi:
Menggunakan Angular2 v2.0.0, Webpack ^1.13.0

Apakah mungkin untuk tidak menyertakan semua lokal tanpa menambahkan konfigurasi ke webpack? Saya menggunakan create-react-app dan saya tidak memiliki kemampuan untuk mengedit file konfigurasi webpack.

Saya mencari di mana-mana dan sepertinya selalu kembali untuk menambahkan baris konfigurasi di webpack.
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

Setuju, saya pikir membutuhkan lokal harus eksplisit saja, tidak pernah implisit.

Ini sangat jelas menurut jumlah masalah yang diangkat di sini pada saat ini, di webpack, di bower, npm, dan waktu yang dihabiskan oleh semua orang untuk menghindarinya sejak beberapa _tahun_.

@ajohnsonRH

Saya menginstal paket npm, tetapi ketika saya melakukannya

impor momen dari 'momen-zona waktu';

momen selalu tidak terdefinisi. Bagaimana itu?

Saya mengalami masalah yang sama menggunakan proyek Angular 2 CLI. Adakah yang sudah menemukan solusi yang berfungsi?

Mencari petunjuk untuk proyek Angular CLI juga

Adakah petunjuk untuk Angular CLI ?

Seperti yang Anda lihat, saya bertanya 4 bulan lalu tentang CLI dan tidak ada jawaban, solusi kami adalah mengganti momen dengan date-fns, dan karena kami juga menggunakan chartjs dalam proyek kami dan memiliki ketergantungan momen, kami sedang dalam proses menggantikan itu juga.

solusi yang cukup bagus
https://github.com/moment/momentjs.com/pull/489