如何在ES6中导入“旧的”ES5代码

Question

我有一个使用Babel 6.5和Webpack的ES6应用程序，并且它可以成功地导入我的模块，就像这样：

import $ from 'jquery';

我想安装https://github.com/robflaherty/riveted/blob/master/riveted.js（一个用于Google Analytics的插件），但是如您所见，该代码没有像module.exports = ...这样的东西，它仅定义了一个全局变量riveted，但它具有明显有效的package.json指向riveted.js。

因此，可以进行以下操作：

import riveted from 'riveted'
riveted.init();

抛出错误：

_riveted2.default.init不是一个函数

import riveted from 'riveted'
riveted.init();

import 'riveted'
riveted.init();

抛出错误：

未定义riveted

import * as riveted from 'riveted'
riveted.init();

出现错误：

riveted.init不是一个函数

我该如何访问riveted的init()函数？

- grssnbchr

---

尝试使用import * as riveted from 'riveted'进行操作。 - thomaux

你是在尝试在浏览器中运行吗？ - slebetman

是的@slebetman。@Anzeo谢谢，但这给我一个稍微不同的错误riveted.init不是一个函数。顺便说一下，riveted已经正确地“安装”在node_modules/riveted中。 - grssnbchr

@wnstnsmth 看起来你需要使用 exports-loader 来 shim 这个模块，因为它没有被正确地导出。 - CodingIntrigue

然后在你的脚本之前的 script 标签中包含 riveted.js 即可。无需 require。它已经是浏览器代码，不是 node.js 代码，所以你需要在浏览器中使用它。 - slebetman

你尝试过使用 import { default as es6Module } from 'es5Module'; 吗？ - Isidro Martínez

Answer 1

您可以使用webpack的exports loader：

var riveted = require("exports?riveted!riveted")

详见shimming模块总览

- jantimon

---

这对我的项目帮助非常大，非常感谢你。 - gonzofish

Answer 2

步骤1. 修改 riveted.js

在第18行后添加一些代码。

    // Browser global
    root = !root && typeof self == 'object' ? self : root; // add this line
    root.riveted = factory();

由于在ES6中导入文件时，this是未定义的，因此我们使用self代替。

self比window更好，它可以在主线程和工作线程中都使用。

步骤2. 修改您的导入路径

像这样：

    import './riveted.js';
    riveted.init();

在导入JS文件时，需要使用./或../。

例如：

import `./file.js`
import `../file.js`
import `./a/b/file.js`
import `../a/b/file.js`
import `../../a/b/file.js`

已在Chrome中测试。

- cuixiping