Question

我使用Webpack和Babel构建一个用ECMA6语法编写的Angular1.4项目。我想使用ECMAScript 6 import / export default模块语法，但有时我必须使用Webpack加载器（例如expose）来全局公开模块（例如jquery，需要是角度的全局对象）：require("expose?jquery!jquery")。

有没有办法用Webpack加载器编写ECMAScript6导入？类似的东西：

import "expose?jquery!jquery"

我无法将require()次调用与import次调用混合，因为imports会提升到模块的顶部并打破依赖性加载的顺序。例如。

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

转换为：

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

打破了构建，因为我的Angular指令需要window.jquery，angular.element需要jquery为jqLite，而不是require。

exports default打破模块，使用#include <stdlib.h> #include "week1.h" void insert_at_front(List *self, int data) { List newNode = (List)malloc(sizeof(struct node)); newNode->data = data; newNode->next = *self; *self = newNode; } void print_list(List *self) { List current = *self; while (current != NULL) { printf("%d\n", current->data); current = current->next; } printf("\n"); } int main(void) { List *master; insert_at_front(&master, 10); insert_at_front(&master, 20); print_list(&master); return 0; }导出。

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中的误解：如果你想使用{{1使用ES6 / 7模块要求require导出，default。一般情况下，您应该只使用require('myModule').default和CommonJS模块，而{（1}}可以使用（几乎）所有内容。

如何使用ECMAScript 6导入的Webpack加载器语法（导入/导出/公开）？

1 个答案: