웹 팩, ES6, React를 사용하여 JavaScript 파일 및 호출 함수 ImportJS

웹 팩, ES6, React를 사용하여 JavaScript 파일 및 호출 함수 ImportJS

아주 간단할 것 같은 일을 하려고 합니다.기존 JavaScript 라이브러리를 Import하여 함수를 호출하고 싶습니다.예를 들어 blah.js를 Import하고 blah()를 호출하고 싶습니다.

import React from 'react';
import {blah} from 'blah/js/blah.js';

class MyClass extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    handleResize() {
        blah.blah();
    }

    render() {
          ....
    }
}

export default MyClass;

이 일을 성공시키려면 어떤 마법의 조합을 해야 하는지 궁금해서요.아마 내가 요점을 놓치고 있는 것 같아.이 예에서는 "TypeError: _blah.blah is undefined"라는 오류가 나타납니다.

명명된 내보내기:

예를 들어 다음과 같은 파일을 생성했다고 가정해 보겠습니다.utils.js다른 모듈(React 컴포넌트 등)에서 사용할 수 있도록 하는 유틸리티 기능 포함.그런 다음 각 함수를 명명된 내보내기로 만듭니다.

export function add(x, y) {
  return x + y
}

export function mutiply(x, y) {
  return x * y
}

utils.js가 React 컴포넌트와 같은 디렉토리에 있다고 가정하면 다음과 같이 내보내기를 사용할 수 있습니다.

import { add, multiply } from './utils.js';
...
add(2, 3) // Can be called wherever in your component, and would return 5.

또는 모듈 전체를 공통 네임스페이스 아래에 배치합니다.

import * as utils from './utils.js'; 
...
utils.multiply(2,3)

기본 내보내기:

한편, 1개의 기능(React 클래스, 일반 함수, 상수 등)만을 실행하는 모듈이 있어 다른 사용자가 해당 기능을 사용할 수 있도록 하려면 기본 내보내기를 사용할 수 있습니다.파일이 있다고 칩시다.log.js호출된 인수에 관계없이 로그아웃하는 함수는 다음과 같습니다.

export default function log(message) {
  console.log(message);
}

이것은 다음과 같이 사용할 수 있습니다.

import log from './log.js';
...
log('test') // Would print 'test' in the console.

안 불러도 돼logImport 할 때, 실제로 원하는 대로 부를 수 있습니다.

import logToConsole from './log.js';
...
logToConsole('test') // Would also print 'test' in the console.

조합:

모듈에는 디폴트 내보내기(최대 1)와 이름 있는 내보내기(하나씩 Import 또는 다음 중 하나)를 모두 사용할 수 있습니다.*에일리어스 포함).React에는 실제로 다음과 같은 내용이 있습니다.

import React, { Component, PropTypes } from 'react';

import * as utils from './utils.js'; 

상기의 조작을 실시하면, utils.js 의 함수를 다음과 같이 사용할 수 있습니다.

utils.someFunction()

여기서 작업 코드를 확인하십시오.

Javascript: https://paint0183.netlify.app/를 사용하여 Netlify React 앱에 링크합니다.

Microsoft 페인트 클론의 소스 코드: Github 소스 코드

Faced the same problem but the answer was simple

직접 수입하지 그래요?

import {file-name} from "./file-path";

For example :
    import {jscolor} from "./jscolor";

DOM이 로드된 후 Javascript를 로드하기 위해 추가할 필요가 있는 것은 다음과 같습니다.

window.onload=function() {

// your entire javascript code here 

}

언급URL : https://stackoverflow.com/questions/38467574/import-javascript-file-and-call-functions-using-webpack-es6-reactjs