Signature_pad: Vue+webpack 빌드 오류

ES5 코드만 처리하는 이전 버전의 UglifyJS를 사용 중인 것 같습니다. signature_pad.m.js 코드는 ES6+ 기능을 사용합니다. 따라서 UglifyJS 버전을 사용하여 축소하려면 먼저 Babel을 사용하여 ES5로 컴파일해야 합니다. 이미 ES5로 컴파일된 signature_pad.umd.js 사용할 수도 있습니다.

@ kevinchung1026 어제 같은 문제가 발생했습니다. 나는 둘러보기를 만들고 웹팩에 추가 규칙을 추가하여 수정했습니다.

{
        test: /\.js?$/,
        include: [/node_modules\/signature_pad/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
            }
          }
        ],
      },

여러분에게도 도움이 되기를 바랍니다 😄

이제 괜찮아, thx all

https://github.com/rollup/rollup/wiki/pkg.module 에 따르면 package.json 파일의 module 필드에 지정된 모든 항목은 ES2015 모듈 구문만 사용해야 하지만 나머지 코드는 패키지의 최소 필수 버전의 JS 환경 구문을 따릅니다.

현재 이 모듈을 webpack과 함께 즉시 사용할 수 없습니다(기본적으로 module 에서 main 선호하기 때문)(https://webpack.js.org/configuration/resolve/ 참조). #resolve-mainfields)에서 다른 모듈과 동일했습니다. 따라서 babel이 node_modules 디렉토리에서 프로젝트 대상으로 이 특정 모듈을

browser 필드를 package.json에 추가하는 것이 빠른 해결 방법일 수 있습니다.

여보세요!

저는 Angular 2와 이전 버전의 UglifyJS를 사용하고 있으며 uglifyJS + signature_pad에서 동일한 오류가 발생했습니다.

위의 답변을 통해 새로운 webpack 규칙을 추가하여 문제를 해결했습니다.

{ test: /\.js?$/, include: [/node_modules\/signature_pad/], use: [ { loader: 'babel-loader' } ], }

그리고 webpack 2와 함께 이전 babel loader를 사용해야 했습니다.
패키지.json:

"devDependencies": {
....
"babel-core": "^5.4.7",
"바벨 로더": "^5.1.3"
}