Gọi mã webpacked từ bên ngoài (thẻ script HTML)

Giả sử rằng tôi có lớp như thế này (được viết bằng bản in) và tôi gói nó với webpack vào bundle.js.

export class EntryPoint {
    static run() {
        ...
    }
}

Trong index.html của tôi, tôi sẽ bao gồm gói, nhưng sau đó tôi cũng muốn gọi phương thức tĩnh đó.

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

Tuy nhiên, EntryPointkhông xác định trong trường hợp này. Làm thế nào tôi có thể gọi javascript được đóng gói từ một tập lệnh khác sau đó?

Đã thêm : Tập tin cấu hình Webpack .

Có vẻ như bạn muốn trưng bày gói webpack dưới dạng thư viện . Bạn có thể định cấu hình gói web để hiển thị thư viện của mình trong bối cảnh toàn cầu trong một biến của riêng bạn, như thế EntryPoint.

Tôi không biết TypeScript nên ví dụ này sử dụng JavaScript đơn giản. Nhưng phần quan trọng ở đây là tệp cấu hình webpack, và cụ thể là outputphần:

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

Sau đó, bạn sẽ có thể truy cập các phương thức thư viện của mình như bạn mong đợi:

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

Kiểm tra ý chính với mã thực tế.

Tôi đã quản lý để làm việc này mà không cần webpack.config.jssửa đổi gì thêm , chỉ bằng cách sử dụng importcâu lệnh mà tôi đã gọi từ tệp main / index.js của mình:

import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;

Để tham khảo, đây là weback.config.jstập tin của tôi .

Ban đầu tôi đã thử hoàn thành việc sử dụng tương tự require, tuy nhiên nó đã gán trình bao bọc mô-đun window.EntryPointtrái ngược với lớp thực tế.

Trong trường hợp của mình, tôi đã có thể gọi một hàm từ bên trong JavaScript được gói từ một tập lệnh khác bằng cách viết hàm vào cửa sổ khi tạo nó.

// In the bundled script:
function foo() {
    var modal = document.createElement('div');
}
// Bind to the window
window.foo = foo;
// Then, in the other script where I want to reference the bundled function I just call it as a normal function
<button onClick="window.foo()">Click Me</button>

Tôi đã không thể sử dụng Babel vì vậy điều này làm việc cho tôi.

Tôi đã có một thử thách tương tự, tôi muốn tạo một gói cho nhiều trang trong một hành trình và muốn mỗi trang có điểm nhập riêng vào mã và không có gói riêng cho mỗi trang.

Đây là cách tiếp cận của tôi, rất giống với Kurt Williams nhưng từ một góc độ hơi khác, cũng không thay đổi cấu hình webpack:

JourneyMaster.js

import { getViewData } from './modules/common';
import { VIEW_DATA_API_URL } from './modules/constants';
import { createLandingPage, createAnotherPage } from './modules/components/pageBuilder';

window.landingPageInit = () => {
    getViewData(VIEW_DATA_API_URL).then(viewData => {
        createLandingPage(viewData);
    });
};

window.anotherPageInit = () => {
    getViewData(VIEW_DATA_API_URL).then(viewData => {
        createAnotherPage(viewData);
    });
};

// I appreciate the above could be one liners,
// but readable at a glance is important to me

Sau đó, một ví dụ về cách tôi gọi các phương thức này ở cuối htmltrang:

<script src="/js/JourneyMaster.js"></script>
<script>window.landingPageInit();</script>

WEBPACK.CONFIG.JS

1. KIẾM UMD

module.exports={
            mode:'development',
            entry:'./yourentry.js',
            output:{
            path:path.resolve(__dirname,"dist"),
            filename:'main.js',
            publicPath:'/dist/',
            libraryTarget:'umd', 
            library:'rstate',
            umdNamedDefine: true,
            libraryExport: 'default' 
        }
    }

index.html

<script src="dist/main.js"></script>
<script>
  window.onload = function () {
  rstate()=>{}
</script>

main.js

export default function rstate(){
console.log("i called from html")
}

VÒI

module.exports={
            mode:'development',
            entry:'./yourentry.js',
            output:{
            path:path.resolve(__dirname,"dist"),
            filename:'main.js',
            publicPath:'/dist/',
            libraryTarget:'var', 
            library: 'EntryPoint'
        }
    }

index.html

<script>
  window.onload = function () {
  EntryPoint.rstate()=>{}
</script>

main.js

module.exports={
rstate=function(){
console.log("hi module")
}
}

3.USING AMD là thư viện chúng tôi sử dụng như thế (đối với những người muốn tạo lib)

define(['jquery', './aux-lib.js'], function ($) { ..(1).. });

Ứng dụng:

namespace mytypescript.Pages {

        export class Manage {

     public Initialise() {
     $("#btnNewActivity").click(() => {
                    alert("sdc'");
                });
        }
    }
}

mypage.html:

 <input class="button" type="button" id="btnNewActivity" value="Register New Activity" />

 <script type="text/javascript">
    var page = new mytypescript.Pages.Manage();
    page.Initialise();
</script>