jquery - 如何在 ECMAScript 6 导入中使用 Webpack 加载器语法(导入/导出/暴露)？

Question

我正在使用 Webpack 和 Babel 构建一个 Angular1.4 项目，以 ECMA6 语法编写。我想使用 ECMAScript 6 import/export default 模块语法，但有时我必须使用 Webpack 加载器，例如 expose 到全局公开模块(例如jquery， Angular 要求为全局对象):require("expose?jquery!jquery").

有没有办法使用 Webpack 加载器编写 ECMAScript6 导入？像这样的东西:

import "expose?jquery!jquery"

<小时/>

我无法将 require() 调用与 import 调用混合使用，因为 import 提升到模块顶部并破坏了顺序依赖加载。例如。

require("expose?jquery!jquery);
import angular from "angular";

转换为:

var angular = require("angular");
require("expose?jquery!jquery);

这会破坏构建，因为我的 Angular 指令需要 window.jquery ，这些指令期望 angular.element 是完整的 jquery，而不是Angular 的 jqLit​​e。

并且 require 与模块中断，使用 exports default 导出。

Answer 1

为什么不尝试一下 Webpack 的 Provide 插件呢？

在您的webpack.config.js中:

var webpack = require('webpack'); 
// Remember to install webpack locally with `npm install webpack`

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery'
        })
    ],
    ...
}

这样您就可以将 jQuery 作为整个项目的全局变量，而无需手动要求它!

编辑:我使用带有大写 Q 的 jQuery，你当然可以自由地使用它全部小写。您还应该能够同时使用两者!

编辑 2:另一件值得注意的事情是，并不是 Webpack 破坏了 require 和 export default，而是 Babel 实际上在版本 6 中修复了一个误解:如果您想要将 require 与您拥有的 ES6/7 模块一起使用，以要求 default 导出，因此 require('myModule') .默认。一般来说，您应该只将 require 与 CommonJS 模块一起使用，而您可以将 import 与(几乎)所有内容一起使用。