Máy khách trên nút: Uncaught ReferenceError: Yêu cầu không được xác định

Vì vậy, tôi đang viết một ứng dụng với combo nút / express + jade.

Tôi có client.js, được tải trên máy khách. Trong tệp đó tôi có mã gọi các hàm từ các tệp JavaScript khác. Nỗ lực của tôi là sử dụng

var m = require('./messages');

để tải nội dung của messages.js(giống như tôi làm ở phía máy chủ) và sau đó là các chức năng gọi từ tệp đó. Tuy nhiên, requirekhông được xác định ở phía máy khách và nó sẽ xuất hiện lỗi của biểu mẫu Uncaught ReferenceError: require is not defined.

Các tệp JS khác cũng được tải trong thời gian chạy tại máy khách vì tôi đặt các liên kết ở phần đầu của trang web. Vì vậy, khách hàng biết tất cả các chức năng được xuất từ ​​các tệp khác.

Làm cách nào để tôi gọi các hàm này từ các tệp JS khác (chẳng hạn như messages.js) trong client.jstệp chính mở ổ cắm cho máy chủ?

Điều này là do require()không tồn tại trong JavaScript phía trình duyệt / máy khách.

Bây giờ bạn sẽ phải thực hiện một số lựa chọn về quản lý tập lệnh JavaScript phía máy khách của mình.

Bạn có ba lựa chọn:

1. Sử dụng <script>thẻ.
2. Sử dụng triển khai CommonJS . Các phụ thuộc đồng bộ như Node.js
3. Sử dụng triển khai AMD .

Triển khai phía máy khách CommonJS bao gồm:

(hầu hết trong số họ yêu cầu một bước xây dựng trước khi bạn triển khai)

1. Browserify - Bạn có thể sử dụng hầu hết các mô-đun Node.js trong trình duyệt. Đây là yêu thích cá nhân của tôi.
2. Webpack - Thực hiện mọi thứ (gói JS, CSS, v.v.). Được phổ biến bởi sự đột biến của React.js. Nổi tiếng với đường cong học tập khó khăn của nó.
3. Rollup - Ứng cử viên mới. Tận dụng các mô-đun ES6. Bao gồm các khả năng rung cây (loại bỏ mã không sử dụng).

Bạn có thể đọc thêm về so sánh của tôi về Thành phần Browserify so với (không dùng nữa) .

Triển khai AMD bao gồm:

1. RequireJS - Rất phổ biến trong số các nhà phát triển JavaScript phía máy khách. Không phải sở thích của tôi vì bản chất không đồng bộ của nó.

Lưu ý, trong tìm kiếm của bạn để chọn cái nào sẽ đi cùng, bạn sẽ đọc về Bower . Bower chỉ dành cho các phụ thuộc gói và không được chú ý đến các định nghĩa mô-đun như CommonJS và AMD.

Hy vọng điều này sẽ giúp một số.

Tôi đến từ môi trường điện tử, nơi tôi cần giao tiếp IPC giữa quy trình kết xuất và quy trình chính. Quá trình kết xuất nằm trong một tệp HTML giữa các thẻ script và tạo ra cùng một lỗi. Dòng

const {ipcRenderer} = require('electron')

ném tham chiếu UncaughtError: yêu cầu không được xác định

Tôi đã có thể giải quyết vấn đề đó bằng cách chỉ định tích hợp nút là đúng khi cửa sổ trình duyệt (nơi tệp HTML này được nhúng) ban đầu được tạo trong quy trình chính.

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

Điều đó đã giải quyết vấn đề cho tôi. Giải pháp đã được đề xuất ở đây . Hy vọng điều này sẽ giúp người khác. Chúc mừng.

ES6: Trong html bao gồm tệp js chính bằng thuộc tính type="module"( hỗ trợ trình duyệt ):

<script type="module" src="script.js"></script>

Và trong script.jstệp bao gồm một tệp khác như thế:

import { hello } from './module.js';
...
// alert(hello());

Bên trong tệp được bao gồm ( module.js) bạn phải xuất hàm / lớp mà bạn sẽ nhập

export function hello() {
    return "Hello World";
}

Ví dụ làm việc ở đây .

Trong trường hợp của tôi, tôi đã sử dụng một giải pháp khác.

Vì dự án không yêu cầu CommonJ và nó phải có khả năng tương thích ES3 (các mô-đun không được hỗ trợ), tất cả những gì bạn cần chỉ là xóa tất cả các câu lệnh xuất và nhập khỏi mã của bạn , vì tsconfig của bạn không chứa

"module": "commonjs"

Nhưng sử dụng báo cáo nhập và xuất trong tệp được tham chiếu của bạn

import { Utils } from "./utils"
export interface Actions {}

Mã được tạo cuối cùng sẽ luôn có (ít nhất là cho bản thảo 3.0) các dòng như vậy

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

Ngay cả khi sử dụng điều này sẽ không hoạt động, tôi nghĩ giải pháp tốt nhất là browserify:

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

Điều này làm việc cho tôi

1. lưu tệp này https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. tải vào HTML của bạn như thế này
   <script data-main="your-Scrpt.js" src="require.js"></script>
   Lưu ý!
   sử dụng: -> yêu cầu (['moudle-name']) trong "your-script.js"
   không yêu cầu ('moudle-name')
   const {ipcRenderer} = Yêu cầu (['electron'])
   Không phải: const {ipcRenderer} = Yêu cầu ('electron')