Moment: webpack으로 사용 지침 추가

나는 Webpack을 사용한 적이 없으므로 그 지침이 무엇인지 확신할 수 없습니다. 당신은 그것을 알아낼 수 있었나요? 그렇다면 귀하의 지침을 추가할 수 있습니다.

답장을 보내 주셔서 감사합니다.

아직 아니지만 계속 알려드리겠습니다.

언어 파일은 moment 모듈을 찾고 있습니다. 헤더 참조:

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

moment 는 실제로 이 모듈의 올바른 이름이며(package.json 참조) npm에서 설치하면 모든 것이 작동합니다.

@fernandoacorreia 폴더 이름은 momentjs 입니다.

@icambron CommonJ 와 마찬가지로 define(['../moment'], factory); 가 아닌 이유는 무엇입니까?

lang 파일과 moment.js 파일에서 CommonJ와 AMD의 순서가 일치하면 더 좋을 것입니다.

기본적으로 webpack은 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 생태계는 놀랍습니다. 지난 3개월 동안 시간을 ​​절약하는 것 외에는 아무것도 하지 않았습니다! :)

이제 bower install --save moment를 사용할 수 있습니다.

@ichernev 좋은 것 같습니다. 이 경우 사용처 문서 를 업데이트하면 이 문제가 해결될 것이라고 생각합니다.

조금 늦었지만 이제 제공 플러그인을 사용할 수 있습니다.

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

@sokra 가 제안한 대로 필요한 로케일만 필요로 하기 위해 다음 플러그인을 추가했습니다. 또한 moment 의 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";

방금 'moment.min.js'와 같은 폴더에 빈 'locale' 폴더를 만들어 해당 폴더의 모든 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 ) src/lib/locale 폴더 내에서 로케일을 찾는 webpack에 문제가 있었습니다. 왜냐하면 moment.js 가 선택되고 있었기 때문입니다.

node_modules/moment/src 폴더를 완전히 제거하고 다음을 사용하여 로케일을 설정하는 순간을 가져옵니다.

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

모든 것이 완벽하게 작동하고 경고가 없으며 명시적으로 가져온 로케일만 빌드에 포함됩니다(처음에 추가한 이 주석 에 설명된 대로 webpack.ContextReplacementPlugin 를 사용하지 않고도).

@micheleb 해당 하위 폴더를 찾는 실제 원인은 webpack 2에서 준수하는 momentjs의 package.json jsnext:main 잘못된 설정입니다.

jsnext:main 는 원시 소스 코드가 아니라 ES6 모듈 구문을 사용하는 모듈 빌드를 가리켜야 _아닌_ 합니다.

이것은 webpack 설정( resolve: { alias: { moment: 'moment/moment.js' } } )에서 'moment' 를 'moment/moment.js' (commonjs "main")로 앨리어싱하여 해결할 수 있습니다.

편집: 또는 src 디렉토리의 로케일 데이터를 사용하는 ContextReplacementPlugin 사용(예: jsnext:main 와 동일한 moment 모듈 요청)은 다음과 같습니다. 비슷하다:

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

이것은 아마도 콜백을 사용하지 않고 작성할 수 있지만 moment ./locale 요청에만 적용된다는 "확실한" 것을 원했습니다.

request 이 ../../../locale 를 가리키지 않는지 확인하십시오. 컴파일되는 동안 moment 의 전체 복사본 2개가 번들됩니다.

@sokra async: true 가 컨텍스트에서 설정되면 어떻게 됩니까? 그렇게 하면 모듈이 별도의 청크로 생성되는 것을 볼 수 있지만 예상되는 런타임 동작은 무엇입니까? 충돌? require.ensure / System.import 의 컨텍스트를 처리하기 위해 호출되는 경우 true "기본적으로"라고 가정합니다.

이거 고쳐졌어? 그렇지 않으면 다시 열어야합니까?

왜 폐쇄되었나요? 이것은 여전히 ​​​​발생하는 문제입니다.

@ajohnsonRH

"문서를 업데이트하면 이 문제가 해결될 것이라고 믿습니다."

"moment/momentjs.com#269로 문서 항목을 추가했습니다. 거기에서 추적할 것입니다."

따라서 이 문제는 Moment의 문서 웹사이트에 있는 문제로 대체되었기 때문에 여기에서 닫혔습니다. 누군가가 moment/momentjs.com#269를 해결하기 위해 PR을 작성했으면 합니다.

@butterflyhug

이 수정 사항은 저에게 효과적이었습니다.

1. npm 설치를 수행하십시오
2. vendor.ts를 열고 import 'moment' 행을 추가하십시오.

참고로:
Angular2 v2.0.0, Webpack ^1.13.0 사용

webpack에 구성을 추가하지 않고 모든 로케일을 포함하지 않을 수 있습니까? create-react-app 을 사용하고 있는데 webpack 구성 파일을 편집할 수 없습니다.

나는 모든 곳을 검색하고 항상 webpack에 구성 라인을 추가하는 것으로 돌아오는 것 같습니다.
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

동의합니다. 로케일을 요구하는 것은 암시적이지 않고 명시적이어야 한다고 생각합니다.

그것은 순간, webpack, bower, npm에서 제기된 문제의 수와 몇 _년_ 이후로 모든 사람들이 그것을 우회하기 위해 보낸 시간에 비추어 볼 때 너무나 분명합니다.

@ajohnsonRH

npm 팩을 설치했지만 설치할 때

'moment-timezone'에서 순간 가져오기;

순간은 항상 정의되지 않습니다. 어떻게?

Angular 2 CLI 프로젝트를 사용하여 이와 동일한 문제가 있습니다. 아직 작동하는 솔루션을 찾은 사람이 있습니까?

Angular CLI 프로젝트에 대한 단서도 찾고 있습니다.

Angular CLI에 대한 단서가 있습니까?

보시다시피 4개월 전에 CLI에 대해 질문했지만 답변이 없었습니다. 우리의 솔루션은 단순히 moment를 date-fns로 바꾸는 것이었으며 프로젝트에서도 chartjs를 사용하고 있고 현재 진행 중인 작업에 대한 순간 종속성이 있기 때문에 그것도 교체.

아주 좋은 솔루션
https://github.com/moment/momentjs.com/pull/489