webpack, ES6, ReactJS를 사용하여 JavaScript 파일 가져 오기 및 함수 호출

webpack, ES6, ReactJS를 사용하여 JavaScript 파일 가져 오기 및 함수 호출

---

내가 생각하는 일을하는 것은 매우 간단 할 것입니다. 기존 JavaScript 라이브러리를 가져온 다음 해당 함수를 호출하고 싶습니다. 예를 들어 blah.js를 가져온 다음 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)

기본 내보내기 :

반면에 한 가지만 수행하는 모듈 (React 클래스, 일반 함수, 상수 또는 그 밖의 모든 것이 될 수 있음)이 있고 해당 모듈을 다른 사용자가 사용할 수 있도록하려면 기본 export를 사용할 수 있습니다 . log.js호출 된 인수를 로그 아웃하는 함수가 하나 뿐인 파일이 있다고 가정 해 보겠습니다 .

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

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

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

log가져올 때 호출 할 필요가 없습니다. 실제로 원하는대로 호출 할 수 있습니다.

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

결합 :

모듈은 기본 내보내기 (최대 1 개)와 명명 된 내보내기 (하나씩 가져 오거나 *별칭과 함께 사용)를 모두 가질 수 있습니다 . React는 실제로 이것을 가지고 있습니다.

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

---

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

If you do the above, you will be able to use functions in utils.js as

utils.someFunction()

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