如何使用Webpack加载器语法（进口/出口/公开）与ECMAScript 6导入？ [英] How to use Webpack loaders syntax ( imports/exports/expose) with ECMAScript 6 imports?

问题描述

我正在使用Webpack和Babel构建一个用ECMA6语法编写的Angular1.4项目。我想使用ECMAScript 6 import / export default 模块语法，但有时我必须使用Webpack加载器，例如公开以全局公开模块（例如，jquery，需要作为全角对象的角度）： require（exposed？jquery！jquery） 。

有没有办法用Webpack加载器编写ECMAScript6导入？如下所示：

  importexpose？jquery！jquery
  

---

我不能混合 require（）与 import 调用，因为 import 提升到模块的顶部，并破坏依赖加载的顺序。例如。

  require（expose？jquery！jquery）; 
从角导入角; 
  

转到：

  var angular = require（angular）; 
 require（exposed？jquery！jquery）; 
  

可以打破构建，因为 window.jquery 是我的Angular指令所要求的，它们希望 angular.element 是满的 jquery ，而不是角的 jqLit​​e 。

和要求与模块断开连接，导出为 export default 。

解决方案

为什么不给Webpack的提供插件？

在您的 webpack.config.js 中： p>

  var webpack = require（'webpack'）; 
 //记住要使用npm install webpack来安装webpack 
 
 module.exports = {
 ... 
 plugins：[
 new webpack .ProvidePlugin（{
 jQuery：'jquery'
}）
]，
 ... 
} 
  pre> 
 
 
这样你就可以将jQuery作为整个项目的全局，而无需手动要求！
 
 
 
编辑：我使用jQuery与大写的Q，你当然可以自由使用它全部小写。你也应该可以同时使用！
 
 
 
编辑2：值得注意的另一件事是，Webpack与 require 和导出默认值，那就是Babel实际上在版本6中修正了一个误解：如果你想使用 require 使用ES6 / 7模块，您有要求默认导出，所以 require（'myModule'）。默认。一般来说，您只能使用CommonJS模块使用 require ，而您可以使用（几乎）所有内容使用 import  / p> 
I'm using Webpack and Babel to build an Angular1.4 project, written in ECMA6 syntax. I'd like to use ECMAScript 6 import/export default module syntax, but sometimes I have to use Webpack loaders, such as expose to globally expose modules (e.g. jquery, required to be a global object by angular): require("expose?jquery!jquery").

Is there a way to write ECMAScript6 imports with Webpack loaders? Something like:
import "expose?jquery!jquery"




I can't mix require() calls with import calls, because imports hoist to the top of the module and break the order of dependency loading. E.g. 
require("expose?jquery!jquery);
import angular from "angular";
transpiles to:
var angular = require("angular");
require("expose?jquery!jquery);
which breaks the build, because window.jquery is required by my Angular directives that expect angular.element to be full jquery, not angular's jqLite.

And require breaks with modules, exported with exports default.
解决方案
Why don't you give Webpack's Provide plugin a shot?

In your webpack.config.js:
var webpack = require('webpack'); 
// Remember to install webpack locally with `npm install webpack`

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery'
        })
    ],
    ...
}
This way you'll have jQuery as a global throughout your project without having to manually require it!

Edit: I use jQuery with the uppercase Q, you are of course free to use it all lowercase. You should also be able to use both!

Edit 2: Another thing worth noting is that it's not that Webpack breaks with require and export default, it's that Babel has actually fixed a misconception in version 6: if you want to use require with an ES6/7 module you have to require the default export, so require('myModule').default. In general, you should only use require with CommonJS modules, while you can use import with (almost) everything.

                        
这篇关于如何使用Webpack加载器语法（进口/出口/公开）与ECMAScript 6导入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！