使用 webpack、ES6、ReactJS 导入 JavaScript 文件和调用函数 [英] Import JavaScript file and call functions using webpack, ES6, ReactJS

问题描述

尝试做一些我认为很简单的事情.我想导入一个现有的 JavaScript 库，然后调用它的函数.例如，我想导入 blah.js 然后调用 blah().

Trying to do something I would think would be very simple. I would like to import an existing JavaScript library and then call it's functions. So for example I would like to import blah.js and then call 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 未定义".

Just wondering what magical combination of things I have to do to make this work. Maybe I'm just missing the point. The example gives the error "TypeError: _blah.blah is undefined".

推荐答案

命名导出:

假设您创建了一个名为 utils.js 的文件，其中包含您希望提供给其他模块(例如 React 组件)的实用程序函数.然后你可以让每个函数成为一个命名导出:

Let's say you create a file called utils.js, with utility functions that you want to make available for other modules (e.g. a React component). Then you would make each function a named export:

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

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

假设 utils.js 与您的 React 组件位于同一目录中，您可以像这样使用它的导出:

Assuming that utils.js is located in the same directory as your React component, you can use its exports like this:

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

或者，如果您愿意，将整个模块的内容放在一个公共命名空间下:

Or if you prefer, place the entire module's contents under a common namespace:

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

默认导出:

另一方面，如果你有一个只做一件事的模块(可以是一个 React 类、一个普通函数、一个常量或其他任何东西)并且想要让其他人可以使用那个东西，你可以使用 <强>默认导出.假设我们有一个文件 log.js，只有一个函数可以注销它调用的任何参数:

If you on the other hand have a module that only does one thing (could be a React class, a normal function, a constant, or anything else) and want to make that thing available to others, you can use a default export. Let's say we have a file log.js, with only one function that logs out whatever argument it's called with:

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

现在可以这样使用:

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

导入时不必调用log，实际上可以随意调用它:

You don't have to call it log when you import it, you could actually call it whatever you want:

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

组合:

一个模块可以有一个默认导出(最多 1 个)和命名导出(一个一个导入，或者使用带有别名的 *).React 实际上有这个，考虑:

A module can have both a default export (max 1), and named exports (imported either one by one, or using * with an alias). React actually has this, consider:

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

这篇关于使用 webpack、ES6、ReactJS 导入 JavaScript 文件和调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！