More than 5 years have passed since last update.

webpackでmoment.jsを日本語設定したものをimportする

Last updated at 2019-02-23Posted at 2017-12-03

追記プラグイン使ってね

コメントいただきました。ありがとうございます。現在は不要な言語カットはプラグインで簡単にできます。

moment-locales-webpack-pluginを使うともうちょっと楽に使うlocaleを絞れそうですー。
http://momentjs.com/docs/#/use-it/webpack/

かつてのバージョンは以下のように記述すれば、localeファイルを除いてmoment.jsをインポートできたんですが、最新のは普通に全てインポートされます。

import moment from 'moment/moment'

おとなしく webpack.IgnorePlugin とか使ってください。

webpack.config.js

plugins: [
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]

moment.jsを普通にimportすると全ての言語ファイルも含まれてしまいファイルサイズが大きくなってしまいます。それを回避するため、webpack.config.jsでmoment.jsを言語ファイルを除いてimport方法が紹介されてたりします。

webpack.config.js

plugins: [
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]

この方法のもと、moment.jsを日本語に設定して使うとき以下のように書く必要があります。

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

console.log(moment().format('M月D日（dd）')) // => 12月３日（日）

日本語設定が前提のときは、毎回これを書くのもだるいので、日本語設定されたmoment.jsをexportするファイルを作ってaliasを設定してあげるとスマートかと。日本語以外の言語ファイルも読み込まれません。

↓

src/moment-ja.js

import moment from 'moment/moment'
import 'moment/locale/ja'

moment.locale('ja')

export default moment

webpack.config.js

resolve: {
  alias: {
    'moment-ja': path.join(__dirname, 'src/moment-ja.js')
  }
}

import moment from 'moment-ja'

console.log(moment().format('M月D日（dd）')) // => 12月３日（日）