Question

我遇到这种情况，我正在尝试导入一个现有的库，我将调用troublesome（使用Webpack / Babel FWIW）并在其中有jQuery的全局引用我试图使用模块语法解决。

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

import jQuery from 'jquery'

所以我试过了：

import jQuery from 'jquery'    
import 'troublesome'

但也许并不奇怪，我从jQuery is not a function

开始追回troublesome.js

我也试过这个：

System.import('jquery')
.then(jQuery => {
    window.jQuery = jQuery
})
import 'troublesome'

但是，事实证明System.import是所谓的“模块加载器”的一部分。规格，这是从es6 / 2015规范中提取的，所以它不是由Babel提供的。有一个poly-fill，但Webpack无法通过调用System.import来管理动态导入。

但是......如果我在index.html中调出脚本文件，就像这样：

<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>

在jQuery中解析了对troublesome.js的引用，事情很好，但我宁愿避免脚本标记路由，因为webpack不管理这些。

任何人都可以推荐一个合适的策略来处理这样的场景吗？

更新

在@ TN1ck的一些指导下，我最终能够使用imports-loader

确定一个以Webpack为中心的解决方案

此解决方案的配置如下所示：

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }

Answer 1

可以采用匀场模块：http://webpack.github.io/docs/shimming-modules.html

我从页面引用：

插件ProvidePlugin

此插件使模块在每个模块中都可用作变量。只有在使用变量时才需要该模块。

示例：在不编写require("jquery")的情况下，在每个模块中使$和jQuery可用。

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})

要在webpack-config中使用它，只需将此对象添加到配置中名为plugins的数组中：

// 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
}

Answer 2

对于es6 / 2015，我做了以下几点。

import {jsdom} from 'jsdom';
import jQuery from 'jquery';
var window = jsdom(undefined, {}).defaultView;
var $ = jQuery(window);
//window.jQuery = $; //probably not needed but it's there if something wrong
//window.$ = $;//probably not needed but it's there if something wrong

然后你可以正常使用它

var text = $('<div />').text('hello world!!!').text();
console.log(text);

希望这有帮助。

Answer 3

将jQuery导入您的模块并不适用于'troublesome'。相反，您可以为'troublesome'创建一个薄的包装器模块，它提供jQuery和任何其他所需的“全局”。

麻烦-module.js：

// Bring jQuery into scope for troublesome.
import jQuery from 'jquery';
// Import any other 'troublesome'-assumed globals.

// Paste or have build tool interpolate existing troublesome.js code here.

然后在你的代码中你应该能够

import 'troublesome-module';

Answer 4

我使用jspm和dygraphs遇到了类似的问题。我解决它的方法是使用动态加载，就像你尝试使用ctx.putImageData(imgData, 0, 0); ctx.scale(4, 2); canvas.width = 640; canvas.height = 200; ctx.drawImage(canvas, 0, 0);一样，但重要的部分是在设置之后再次使用System.import在promise onfulfillment handler（然后）内链式加载每个连续的“part”全局命名空间变量。在我的场景中，我实际上必须在System.import个处理程序之间分隔几个导入步骤。

它不能与jspm一起工作的原因，以及为什么它对你不起作用的原因是then语法在任何代码之前被评估，并且肯定在import ... from ...之前异步。

在你的情况下，它可以简单：

System.import

另请注意，import jQuery from 'jquery'; window.jQuery = jQuery; System.import('troublesome').then(troublesome => { // Do something with it... });模块加载程序建议已被排除在最终的ES6规范之外，并且正在起草new loader spec。

Answer 5

运行package teeeeeee; public class Hah { public static void main(String[] args) { int x = 0; while (x == 0){ int[][] array = {{0,0,0},{0,0,0},{0,0,0}}; array = fillMatrix(); if (sumRows(array)&& sumColumns(array)&& sumDiagonals(array)){ System.out.println("you have a magic square"); x = 1; } else System.out.println("not a magic square"); } } public static int[][] fillMatrix(){ int[][] array = new int [] [] { { 2 , 7 , 6 }, { 9 , 5 , 1 }, { 4 , 3 , 8 } }; for (int i = 0; i < array.length; ++i){ System.out.println(array[i]); } return array; } public static boolean sumRows(int [][] array){ for (int r = 0; r < 3; r++){ int sum = 0; for (int c = 0; c < 3; c++) sum += array[r][c]; if (sum != 15) return false; } return true; } public static boolean sumColumns(int [][] array){ for (int c = 0; c < 3; c++){ int sum = 0; for (int r = 0; r < 3; r++) sum += array[r][c]; if (sum != 15) return false; } return true; } public static boolean sumDiagonals(int [][] array){ if (array[0][0] + array[1][1] + array[2][2] != 15) return false; if (array[0][2] + array[1][1] + array[2][0] != 15) return false; return true; } }。
将npm install import-loader替换为import 'troublesome'。

在我看来，这是您问题的最简单的解决方案。它类似于你在问题@ TN1ck中写的答案，但没有改变你的webpack配置。有关更多信息，请参阅：https://github.com/webpack/imports-loader

Answer 6

Shimming很好，并且有各种方法可以解决这个问题，但根据我的回答here，最简单的实际上只是恢复使用require来加载需要全局依赖的库 - 然后只是确保你的窗口。赋值在该require语句之前，并且它们都在您的其他导入之后，并且您的排序应保持原样。问题是由Babel提升导入引起的，这样它们都会在任何其他代码之前执行。

我是否可以使用ES6 / 2015模块导入在全局＆＃39;中设置引用？范围？

6 个答案:

插件ProvidePlugin