可以使用ES6 / 2015模块导入在“全局”范围内设置引用吗？ [英] Can I use an ES6/2015 module import to set a reference in 'global' scope?

问题描述

我有这种情况，我试图导入一个现有的库，我将调用麻烦（使用Webpack / Babel FWIW），它有一个全局引用

我已成功将jquery导入到本地'模块的范围，通过：

 从'jquery'导入jQuery 
  / pre> 
 
 
所以我试过：
 从jquery导入jQuery '
 import'麻烦'
  
但也许不足为奇，我得到的东西像$ $ c> jQuery不是一个函数从 troublesome.js踢回来 
 
 
 
我也尝试过这个：
  System.import（'jquery'）
 .then（jQuery => { 
 window.jQuery = jQuery 
}）
 import'troublesome'
  
但事实证明， System.import 是所谓的模块装载机规范的一部分，是从es6 / 2015规范中提取出来的，所以它不是由巴别塔提供的。有一个多重填充，但Webpack无法管理动态导入通过调用 System.import  
 
 
 
但是如果我在索引中调出脚本文件。 html像这样：
 < script src =https://code.jquery.com/jquery-2.1.4。 min.js>< /脚本> 
< script src =https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js>< / script> 
< script src =the-rest-of-my-js.js>< / script> 
  
对 jQuery 的引用在 troublesome.js ，事情很好，
，但是我宁愿避免脚本标记路由，因为webpack不管这些路由。
 
 
 
任何人都可以推荐一个体面的策略来处理这样的场景？
 
 
 
 更新 
 
 
 
与@ TN1ck的一些指导，我最终能够使用 import-loader  
 
 
 
此解决方案的配置如下所示：
  // ... 
 module：{
 loaders：[
 // ... 
 {
 test：require.resolve（'troublesome'），
 loader：imported？jQuery = jquery，$ = jquery
} 
] 
} 
  
 
 
解决方案
 Shimming模块是要走的路： http://webpack.github.io/docs/shimming- modules.html  
 
 
 
我从页面引用：
 
 
 
插件ProvidePlugin 
 
 
 
此插件使模块在每个模块中都可用作变量。 
 
 
 
示例：使$和jQuery在每个模块中都可用，而无需编写 require（jquery） 。
  new webpack.ProvidePlugin（{
 $：jquery，
 jQuery：jquery，
window.jQuery：jquery
}）
  
要将此对象与您的webpack-config一起使用，只需将该对象添加到config中的一个名为plugins的数组：
  //我们要使用的插件
 var plugins = [
 new webpack.ProvidePlugin（{
 $：jquery，
 jQuery：jquery，
window.jQuery：jquery
}）
]; 
 
 //这是你的webpack-config 
 module.exports = {
条目：...，
输出：...，
模块：...，
插件：插件
} 
  
 
I have this situation where I am trying to import an existing library, which I'll call troublesome (using Webpack/Babel FWIW) and it has a global reference to jQuery in it which i am trying to resolve using module syntax.

I have successfully imported jquery into the 'local' scope of a module, via:
import jQuery from 'jquery'
so I tried:
import jQuery from 'jquery'    
import 'troublesome'
but perhaps not surprisingly, I get something like jQuery is not a function kicked back from troublesome.js

I have tried this as well:
System.import('jquery')
.then(jQuery => {
    window.jQuery = jQuery
})
import 'troublesome'
but, it turns out that System.import is part of the, so-called, 'module-loader' spec, which was pulled from the es6/2015 spec, so it isn't provided by Babel. There is a poly-fill, but Webpack wouldn't be able to manage dynamic imports accomplished via calls to System.import anyway.

but... if I call out the script files in index.html like so:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>
the reference to jQuery is resolved in troublesome.js and things are good,
but I would prefer to avoid the script tag route as webpack doesn't manage those.

Can anyone recommend a decent strategy for dealing with scenarios like this?

update

with some guidance from @TN1ck, I was eventually able to identify one Webpack-centric solution, using the imports-loader

The configuration for this solution looks something like this:
  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }

解决方案
Shimming modules is the way to go: http://webpack.github.io/docs/shimming-modules.html

I quote from the page:

plugin ProvidePlugin

This plugin makes a module available as variable in every module. The module is required only if you use the variable.

Example: Make $ and jQuery available in every module without writing require("jquery").
new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})
To use this with your webpack-config just add this object to an array called plugins in the config:
// the plugins we want to use 
var plugins = [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
   })
];

// this is your webpack-config
module.exports = {
    entry: ...,
    output: ...,
    module: ...,
    plugins: plugins
}


                        
这篇关于可以使用ES6 / 2015模块导入在“全局”范围内设置引用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！