노드의 클라이언트 : Uncaught ReferenceError : require is not defined

그래서 node / express + jade 콤보로 응용 프로그램을 작성 중입니다.

나는이 client.js클라이언트에로드된다. 그 파일에는 다른 JavaScript 파일에서 함수를 호출하는 코드가 있습니다. 내 시도는 사용했다

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

messages.js서버 측에서와 마찬가지로 나중에 해당 파일에서 호출 함수 의 내용을로드하기 위해 . 그러나 require클라이언트 측에 정의되어 있지 않으며 형식 오류가 발생합니다 Uncaught ReferenceError: require is not defined.

이 다른 JS 파일은 웹 페이지의 헤더에 링크를 배치하기 때문에 클라이언트에서 런타임에로드됩니다. 따라서 클라이언트는 이러한 다른 파일에서 내 보낸 모든 기능을 알고 있습니다.

소켓을 서버에 여는 messages.js메인 client.js파일의 다른 JS 파일 (예 :)에서 이러한 함수를 어떻게 호출 합니까?

require()브라우저 / 클라이언트 측 JavaScript에는 존재하지 않기 때문 입니다.

이제 클라이언트 측 JavaScript 스크립트 관리에 대해 몇 가지 선택을해야합니다.

세 가지 옵션이 있습니다.

1. <script>태그를 사용하십시오 .
2. CommonJS 구현을 사용하십시오 . Node.js와 같은 동기 종속성
3. AMD 구현을 사용하십시오 .

CommonJS 클라이언트 측 구현에는 다음이 포함됩니다.

(대부분 배포하기 전에 빌드 단계가 필요합니다)

1. Browserify- 브라우저에서 대부분의 Node.js 모듈을 사용할 수 있습니다. 이것은 내가 개인적으로 좋아하는 것입니다.
2. 웹팩 -모든 작업을 수행합니다 (JS, CSS 등 번들). React.js의 급증으로 인기를 얻었습니다. 어려운 학습 곡선으로 유명합니다.
3. 롤업 -새로운 경쟁자. ES6 모듈을 활용합니다. 트리 셰이 킹 기능을 포함합니다 (사용하지 않는 코드 제거).

Browserify vs (더 이상 사용되지 않는) Component 비교에 대한 자세한 내용을 읽을 수 있습니다 .

AMD 구현에는 다음이 포함됩니다.

1. RequireJS- 클라이언트 측 JavaScript 개발자들에게 매우 인기가 있습니다. 비동기 특성으로 인해 내 취향이 아닙니다.

어떤 것을 고를 지에 대한 검색에서 Bower 에 대해 읽을 것 입니다. Bower는 패키지 종속성만을위한 것이며 CommonJS 및 AMD와 같은 모듈 정의에는 영향을주지 않습니다.

이것이 도움이되기를 바랍니다.

전자 환경에서 렌더러 프로세스와 기본 프로세스 간의 IPC 통신이 필요합니다. 렌더러 프로세스는 스크립트 태그 사이의 HTML 파일에 있으며 동일한 오류를 생성합니다. 라인

const {ipcRenderer} = require('electron')

가 발생합니다 catch되지 않은 오류 ReferenceError를 : 정의되지 않은 필요

브라우저 창 (이 HTML 파일이 포함 된 곳)이 기본 프로세스에서 처음 만들어 졌을 때 노드 통합을 true로 지정하여이 문제를 해결할 수있었습니다.

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

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

그것은 나를 위해 문제를 해결했습니다. 해결책은 여기 에 제안 되었습니다 . 이것이 다른 누군가를 돕기를 바랍니다. 건배.

ES6 : HTML에서 속성을 사용하여 기본 js 파일 포함 type="module"( 브라우저 지원 ) :

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

그리고 script.js파일에 다음과 같은 다른 파일을 포함하십시오.

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

포함 된 파일 ( module.js) 안에는 가져올 함수 / 클래스 를 내 보내야합니다.

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

실제 사례는 여기 .

내 경우에는 다른 솔루션을 사용했습니다.

프로젝트에는 CommonJ가 필요하지 않으며 ES3 호환성 (모듈이 지원되지 않음)이 있어야 하므로 tsconfig 에는 포함되어 있지 않기 때문에 코드에서 모든 export 및 import 문만 제거하면됩니다.

"module": "commonjs"

그러나 참조 파일에서 import 및 export 문을 사용하십시오.

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

최종 생성 된 코드는 항상 (적어도 typescript 3.0의 경우) 그러한 행을 갖습니다.

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

이 기능을 사용해도 작동하지 않습니다. 가장 좋은 해결책은 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();

이것은 나를 위해 일했다

1. 이 파일을 저장하십시오 https://requirejs.org/docs/release/2.3.5/minified/require.js
   
2. 이
   <script data-main="your-Scrpt.js" src="require.js"></script>
   노트 와 같이 HTML에로드 하십시오!
   사용 : "your-script.js"에서-> require ([ 'moudle-name'])
   필요하지 않습니다 ( 'moudle-name')
   const {ipcRenderer} = require ([ 'electron'])
   아님 : const {ipcRenderer} = require ( '전자')