[javascript] webpack으로 moment.js가 로캘을로드하지 못하게하는 방법은 무엇입니까?

Program / 글쓴이

moment.js웹팩을 사용할 때 모든 로케일을로드 하지 못하게 할 수있는 방법이 있습니까? 나는 소스를보고 hasModule있는데 webpack에 대한 것이 정의 되어 있으면 항상 require()모든 로케일을 시도 하는 것 같습니다 . 이 문제를 해결하려면 풀 요청이 필요하다고 확신합니다. 그러나 webpack 구성으로이를 해결할 수있는 방법이 있습니까?

momentjs를로드하는 웹 팩 구성은 다음과 같습니다.

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

그런 다음 필요한 곳이면 어디든 할 수 require('moment')있습니다. 이것은 작동하지만 약 250kB의 불필요한 언어 파일을 내 번들에 추가하고 있습니다. 또한 나는 bowers 버전의 momentjs와 gulp를 사용하고 있습니다.

또한 webpack 설정으로 해결할 수없는 경우 여기 로케일을로드하는 함수에 대한 링크가 있습니다 . 나는 진술에 추가 && module.exports.loadLocales를 시도했지만 ifwebpack은 실제로 그것이 작동하는 방식으로 작동하지 않는다고 생각합니다. 그것은 require무엇이든 상관 없습니다. 나는 그것이 정규식을 사용한다고 생각하므로 실제로 어떻게 고칠 지 모른다.

답변

코드 require('./locale/' + name)는 locale디렉토리의 모든 파일을 사용할 수 있습니다 . 따라서 webpack에는 모든 파일이 번들의 모듈로 포함됩니다. 사용중인 언어를 알 수 없습니다.

있습니다 이 플러그인 : 더 모듈이 번들에 포함되어야에 대한 정보 웹팩 제공하는 유용 ContextReplacementPlugin하고 IgnorePlugin.

require('./locale/' + name)컨텍스트 (표현식을 포함해야 함)라고합니다 . webpack은이 코드 조각에서 일부 정보를 유추합니다 : 디렉토리 및 정규식. 여기 : directory = ".../moment/locale" regular expression = /^.*$/. 따라서 기본적으로 locale디렉토리의 모든 파일 이 포함됩니다.

ContextReplacementPlugin이를 통해 추론 된 정보를 재정 의 할 수 있습니다. 즉, 포함 할 언어를 선택하기 위해 새로운 정규식을 제공합니다.

또 다른 방법은로 요구 사항을 무시하는 것 IgnorePlugin입니다.

예를 들면 다음과 같습니다.

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

답변

우리 프로젝트에는 다음과 같은 순간이 포함되어 import moment from 'moment/src/moment';있습니다. 우리의 순간 사용법은 매우 간단하므로 SDK와 불일치가 있는지 확실하지 않습니다. WebPack은 로케일 파일을 정적으로 찾는 방법을 모르기 때문에 (빈 폴더를 추가하여 쉽게 숨길 수 있음) 경고가 표시 moment/src/lib/locale/locale되지만 로케일을 포함 하지 않기 때문에 이것이 효과가 있다고 생각합니다 .

답변

적절한 모듈 형 moment라이브러리와 함께 올 것이다 버전 3 내가 각도-CLI를 사용하고 있습니다로하지 않고 그래서 현재 어느 시점에서 --eject난 그냥 사용하는 결국 https://github.com/ksloan/moment-mini 처럼import * as moment from 'moment-mini';

답변

Adam McCrmick의 답변을 바탕으로 가까운 곳에 별칭을 다음과 같이 변경하십시오.

resolve: {
    alias: {
        moment: 'moment/src/moment'
    },
},

답변

으로 webpack2당신이 할 수있는 순간의 최신 버전과 :

import {fn as moment} from 'moment'

그리고 webpack.config.js당신은 :

resolve: {
    packageMains: ['jsnext:main', 'main']
}

답변