Nhập các hàm gọi và tệp JavaScript bằng cách sử dụng webpack, ES6, ReactJS

Cố gắng làm điều gì đó mà tôi nghĩ sẽ rất đơn giản. Tôi muốn nhập một thư viện JavaScript hiện có và sau đó gọi nó là các hàm. Vì vậy, ví dụ, tôi muốn nhập blah.js và sau đó gọi 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;

Tôi chỉ tự hỏi sự kết hợp kỳ diệu của những thứ tôi phải làm để làm cho nó thành công. Có lẽ tôi chỉ thiếu điểm. Ví dụ đưa ra lỗi "TypeError: _blah.blah is undefined".

Xuất khẩu được đặt tên:

Giả sử bạn tạo một tệp có tên utils.js, với các chức năng tiện ích mà bạn muốn cung cấp cho các mô-đun khác (ví dụ: một thành phần React). Sau đó, bạn sẽ đặt mỗi hàm là một bản xuất có tên :

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

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

Giả sử rằng utils.js nằm trong cùng thư mục với thành phần React của bạn, bạn có thể sử dụng các xuất của nó như sau:

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

Hoặc nếu bạn thích, hãy đặt toàn bộ nội dung của mô-đun trong một không gian tên chung:

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

Xuất mặc định:

Mặt khác, nếu bạn có một mô-đun chỉ làm một việc (có thể là một lớp React, một hàm bình thường, một hằng số hoặc bất cứ thứ gì khác) và muốn cung cấp thứ đó cho những người khác, bạn có thể sử dụng xuất mặc định . Giả sử chúng ta có một tệp log.js, chỉ với một hàm đăng xuất bất kỳ đối số nào mà nó được gọi bằng:

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

Điều này bây giờ có thể được sử dụng như thế này:

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

Bạn không cần phải gọi nó logkhi nhập nó, bạn thực sự có thể gọi nó bất cứ thứ gì bạn muốn:

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

Kết hợp:

Một mô-đun có thể có cả xuất mặc định (tối đa 1) và xuất có tên (được nhập từng cái một hoặc sử dụng *với bí danh). React thực sự có điều này, hãy xem xét:

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

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

Nếu bạn làm như trên, bạn sẽ có thể sử dụng các hàm trong utils.js như

utils.someFunction()