웹팩을 사용하여 함수 내보내기 및 번들링 및 HTML 스크립트 태그 내에서 호출

Dec 15 2020

나는 웹팩을 사용하여 함수를 내보내고 번들로 묶은 다음 내 html 페이지의 스크립트 태그에서 호출하는 등 매우 간단한 작업을 시도해 왔습니다.

sample.js-webpack을 사용하여 번들로 제공됩니다.

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Webpack 구성 (버전 = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

나는 그것이 비록 추가 한 쉽게 librarylibraryTarget웹팩 설정에 목표를하고 나는 나의 함수를 호출 할 수 있어야한다 MyLibrary.sampleFunctionExported1().

하지만 MyLibrary내 브라우저 콘솔에서 할 때 아래와 같이 표시되고 오류가 MyLibrary.sampleFunctionExported1()반환 됩니다.... is not a function

나는 많은 질문 / 답변에서 제안을 따랐습니다 : 답변 1 , 답변 2 , 답변 3 및 다양한 기타 블로그 게시물이지만 전혀 작동하지 않습니다.

그래서 많은 시간을 보낸 후 누군가가 잘못된 것을 이해하도록 도울 수 있기를 바라며 여기에 게시하고 있습니다.

편집 1 : 다음은 웹팩 번들링 후 생성 된 파일입니다. /public/js/sample.js

추신- entry2.js빈 파일이므로 파일을 무시하고 내 구성을 표시하기 위해 파일을 추가했으며 여러 진입 점이 현재 직면하고있는이 문제를 일으킬 수 있는지 확실하지 않기 때문입니다.

답변

1 Jacob Dec 15 2020 at 03:21

내보내기 방식으로 인해 :

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

... MyLibrary변수는 다음과 같은 형태를 갖습니다.

{
  default: function() { ... }
}

대신 모양을 원할 경우 :

{
  sampleFunctionExported1: function() { ... }
}

... 기본 내보내기 대신 명명 된 내보내기를 수행해야합니다.

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}