Pertanyaan Dapatkah saya menggunakan impor modul ES6 / 2015 untuk menetapkan referensi dalam lingkup 'global'?


Saya memiliki situasi ini di mana saya mencoba mengimpor pustaka yang sudah ada, yang akan saya hubungi troublesome (menggunakan Webpack / Babel FWIW) dan memiliki referensi global untuk jQuery di dalamnya yang saya coba selesaikan menggunakan sintaks modul.

Saya telah berhasil mengimpor jquery ke dalam lingkup modul 'lokal', melalui:

import jQuery from 'jquery'

jadi saya mencoba:

import jQuery from 'jquery'    
import 'troublesome'

tapi mungkin tidak mengherankan, saya mendapatkan sesuatu seperti itu jQuery is not a function ditendang kembali troublesome.js

Saya telah mencoba ini juga:

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

tapi ternyata itu System.import adalah bagian dari spesifikasi 'modul-loader', yang ditarik dari spesifikasi es6 / 2015, sehingga tidak disediakan oleh Babel. Ada sebuah poly-fill, tetapi Webpack tidak akan mampu mengelola impor dinamis yang dilakukan melalui panggilan ke System.import bagaimanapun.

tapi ... jika saya memanggil file skrip di index.html seperti ini:

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

referensi ke jQuery diselesaikan dalam troublesome.js dan semuanya baik-baik saja, tetapi saya lebih memilih untuk menghindari rute tag skrip karena webpack tidak mengaturnya.

Adakah yang bisa merekomendasikan strategi yang layak untuk menghadapi skenario seperti ini?

memperbarui

dengan beberapa petunjuk dari @ TN1ck, saya akhirnya dapat mengidentifikasi satu solusi Webpack-centric, menggunakan impor-loader

Konfigurasi untuk solusi ini terlihat seperti ini:

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

32
2017-07-03 01:41


asal


Jawaban:


Modul Shimming adalah cara untuk pergi: http://webpack.github.io/docs/shimming-modules.html

Saya mengutip dari halaman:

Plugin ProvidPlugin

Plugin ini membuat modul tersedia sebagai variabel di setiap modul. Modul ini hanya diperlukan jika Anda menggunakan variabel.

Contoh: Buat $ dan jQuery tersedia di setiap modul tanpa menulis require("jquery").

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

Untuk menggunakannya dengan webpack-config, tambahkan saja objek ini ke sebuah array bernama plugin dalam konfigurasi:

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

15
2017-07-06 19:01



Untuk es6 / 2015 saya melakukan hal berikut.

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

Maka Anda dapat menggunakannya seperti biasa

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

Semoga ini membantu.


2
2017-11-10 11:54



Pengimporan jQuery ke dalam modul Anda tidak membuatnya tersedia untuk 'troublesome'. Sebagai gantinya, Anda bisa membuat modul pembungkus tipis untuk 'troublesome' yang menyediakan jQuery dan "global" lainnya yang diperlukan.

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

Kemudian dalam kode Anda, Anda seharusnya bisa

import 'troublesome-module';

0
2017-07-05 20:05



Saya memiliki masalah yang sama menggunakan jspm dan dygraphs. Cara saya memecahkannya adalah dengan menggunakan pemuatan dinamis seperti yang Anda coba gunakan System.import tetapi bagian yang penting adalah untuk mem-load setiap bagian "bagian" secara berurutan System.import lagi di dalam janji onfulfillment handler (kemudian) setelah mengatur variabel namespace global. Dalam skenario saya, saya sebenarnya harus memiliki beberapa langkah impor yang terpisah then penangan.

Alasannya tidak bekerja dengan jspm, dan mungkin mengapa itu tidak bekerja untuk Anda juga adalah bahwa import ... from ... sintaks dievaluasi sebelum kode apa pun, dan pasti sebelumnya System.import mana async.

Dalam kasus Anda, itu bisa sesederhana:

import jQuery from 'jquery';

window.jQuery = jQuery;
System.import('troublesome').then(troublesome => {
 // Do something with it...
});

Juga perhatikan bahwa System Rekomendasi loader modul telah ditinggalkan dari spesifikasi final ES6, dan a spesifikasi loader baru sedang disusun.


0
2017-07-05 21:11



  1. menjalankan npm install import-loader.
  2. menggantikan import 'troublesome' dengan import 'imports?jQuery=jquery,$=jquery!troublesome.

Menurut saya, ini adalah solusi paling sederhana untuk pertanyaan Anda. Ini mirip dengan jawaban yang Anda tulis dalam pertanyaan Anda @ TN1ck, tetapi tanpa mengubah konfigurasi webpack Anda. Untuk bacaan lebih lanjut, lihat: https://github.com/webpack/imports-loader


0
2017-11-23 01:06



Shimming baik-baik saja dan ada berbagai cara untuk menyelesaikan ini, tetapi sesuai dengan jawaban saya sini, yang paling sederhana sebenarnya hanya untuk kembali menggunakan kebutuhan untuk pemuatan perpustakaan yang membutuhkan ketergantungan global - kemudian pastikan jendela Anda. tugas adalah sebelum yang membutuhkan pernyataan, dan mereka berdua setelah impor Anda yang lain, dan pemesanan Anda harus tetap seperti yang dimaksudkan. Masalah ini disebabkan oleh Babel mengangkat impor sehingga semuanya dapat dieksekusi sebelum kode lainnya.


0
2017-11-28 14:37