Câu hỏi Gọi mã webpack từ bên ngoài (HTML script tag)


Giả sử rằng tôi có lớp như thế này (viết bằng chữ) 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, EntryPoint là không xác định trong trường hợp này. Làm thế nào tôi sẽ gọi javascript kèm theo từ một kịch bản sau đó?

Thêm: Tệp cấu hình Webpack.


76
2017-12-18 14:07


gốc


Vui lòng thêm cấu hình webpack của bạn. Tôi tin rằng một cái gì đó dọc theo dòng var EntryPoint = require('EntryPoint') bị thiếu trong onload phương pháp. - Martin Vseticka
@MartinVseticka Tôi đã thêm cấu hình của mình. Quả thực một cái gì đó như require có thể cần thiết nhưng giống như nhập dưới đây, nó nói require is not defined. Những gì tôi đang cố gắng làm là sử dụng nội dung đi kèm từ javascript đơn giản, tôi sẽ không cần một số khung công tác nữa để sử dụng require? Nhưng tôi đang cố tránh điều đó. Hy vọng nó có ý nghĩa. - Raven


Các câu trả lời:


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

Tôi không biết TypeScript nên ví dụ này sử dụng JavaScript thuần túy thay thế. Nhưng phần quan trọng ở đây là tệp cấu hình webpack và cụ thể là output phầ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ế.


94
2017-12-18 17:53



Cảm ơn! Đây là những gì tôi đã cố gắng làm. - Raven
Chúng tôi có nhiều điểm vào, vì vậy trong phần đầu ra, tôi thay vào đó library: ["GlobalAccess", "[name]"],. Điều đó sau đó làm cho var là một đối tượng với các thành viên cho mỗi entrypoint: GlobalAccess.EntryPointFoo, GlobalAccess.EntryPointBar, v.v. - John Hatton
Điều này làm việc cho nam run build nhưng không làm việc trong dev env sử dụng webpack-dev-server. EntryPoint được xuất của tôi là một đối tượng trống. Bất kỳ ý tưởng? - nkint
Giải pháp này có hoạt động với webpack 2 không? EntryPoint của tôi không trống, nhưng các hàm đã xuất bị thiếu (tôi nhận được thông báo lỗi "EntryPoint.run không phải là một hàm"). - Trantor
những gì về tình hình nơi nhập cảnh: {page1: ['module1.js', 'module2.js'], page2: 'module3.js'} @JohnHatton gợi ý dường như không hoạt động sau đó. Tôi có quyền truy cập vào page1.module2, nhưng không truy cập vào page1.module1. Có vẻ như chỉ lấy cái cuối cùng. - sheamus


Tôi đã xoay sở để làm việc này mà không cần thêm webpack.config.js sửa đổi, bằng cách sử dụng import tuyên bố mà tôi đã gọi từ tệp chính / index.js của mình:

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

enter image description here

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

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 cho window.EntryPoint trái với lớp thực tế.


33
2017-12-18 15:05



Bất kỳ cơ hội làm điều này mà không có es6? Nếu không tôi nhận được Uncaught SyntaxError: Unexpected token import. Hay là của bạn index.js cũng được đóng gói (tôi thấy nó là điểm vào, nhưng không chắc chắn)? - Raven
Yeah, index.js cũng được đóng gói - đó là nơi tôi đã đưa vào câu lệnh import - Matt
Vâng, bạn thấy đấy, tôi đang cố gắng truy cập vào thứ gì đó được đóng gói từ một tập lệnh không thuộc về gói. Giống như gói là một thư viện và tôi sẽ cố gắng truy cập các phương thức của nó từ bên ngoài. Điều đó có thể không? - Raven
Cảm ơn bạn, điều này đã làm việc cho tôi quá !! - Deepan Prabhu Babu
Giải pháp này thực sự đơn giản và tôi xấu hổ vì bản thân tôi không nghĩ về nó ngay khi vấn đề nảy sinh. - cav_dan


Trong hoàn cảnh của tôi, tôi đã có thể gọi một hàm từ bên trong JavaScript được đóng 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 để điều này làm việc cho tôi.


5
2017-09-29 16:55





App.ts:

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>

-4
2018-05-29 22:48