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

Question

Cố gắng làm điều gì đó 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; 

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

Answer 1

xuất khẩu tên:

Hãy nói rằng bạn tạo ra một tập tin gọi là utils.js, với các chức năng tiện ích mà bạn muốn làm cho có sẵn cho các module khác (ví dụ một Phản ứng thành phần). Sau đó, bạn sẽ làm cho mỗi hoạt động một tên xuất khẩu:

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

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

Giả sử utils.js đó nằm trong thư mục tương tự như của bạn Phản ứng thành phần, bạn có thể sử dụng xuất khẩu của nó như thế này:

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 vào một không gian tên chung:

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

Mặc định xuất khẩu:

Nếu bạn có một mô-đun chỉ thực hiện một điều (có thể là lớp React, hàm bình thường, hằng số hoặc bất kỳ thứ gì khác) và muốn làm cho mọi thứ có sẵn cho người khác, bạn có thể sử dụng xuất mặc định. Hãy nói rằng chúng ta có một tập tin log.js, chỉ với một chức năng mà các bản ghi ra bất cứ điều gì lập luận nó được gọi với:

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

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ó log khi bạn nhập nó, bạn có thể thực sự gọi nó là bất cứ điều gì bạn muốn:

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

Combined:

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

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

Answer 2

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

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

utils.someFunction()