如何使用 babel 和 typescript 在 webpack 上公开 jquery 插件答案

【问题标题】：How can i expose a jquery plugin on webpack with babel and typescript如何使用 babel 和 typescript 在 webpack 上公开 jquery 插件
【发布时间】：2018-04-01 08:31:41
【问题描述】：

我已经尝试了几个小时以使以下代码无法成功。

第一步图书馆建设

我有很多用打字稿构建的 es6 代码。我使用 babel 和 typescript 编译它们以获取 js lib。到目前为止一切正常。在我的库顶部，我有一个包装器，可以让我使用 jquery 扩展快速访问库主组件：

require('jquery');

$.fn.extend({
  saidashboard : function (options: SAIDashboardConfig) {
    let builtEntry: SAIDashboardView;
    /* ... some code ... */
    return builtEntry;
  }
});

第 2 步测试

我有一个应该测试库的测试文件。在 test-empty.js 文件中，我加载了一些 json 描述符并尝试用它来初始化我的对象

'use strict';

var chai = require('chai');
var $ = require("jquery");
var fs = require('fs');
require('../dist/sai-dashboard');

chai.should();

var newDash;

before( function(done) {
  try{
    fs.readFile('./tests/resources/descriptors/empty-dashboard.json', 'utf8', function (err,data) {
        if (err) {
            done(new Error(err));
        } else {
            var newDashEl = $('<div></div>').addClass('dashboard-test-container');
            newDash = newDashEl.saidashboard(JSON.parse(data));
            done();
        }
    });
  }catch(e){
    done(e);
  }
});

问题

我无法停止收到以下错误

Uncaught TypeError: newDashEl.saidashboard is not a function

就像我的 $.fn.extend 是在与我正在使用的不同的 jquery 实例上调用它一样。

我正在使用以下方式启动测试：

mocha-webpack --require setup-test.js --require source-map-support/register --webpack-config webpack.config-test.js tests/test-empty.js

这里是 setup.js 文件：

const JSDOM = require('jsdom').JSDOM;

const { document } = (new JSDOM('')).window;
global.document = document;
global.window = document.defaultView;
window.console = global.console;

Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

还有 webpack.config-test.js

var nodeExternals = require('webpack-node-externals');

module.exports = {
  output: {
  // sourcemap support for IntelliJ/Webstorm 
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },
  target: 'node', // in order to ignore built-in modules like path, fs, etc. 
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 
  devtool: "cheap-module-source-map" // faster than 'source-map' 
};

有什么想法吗？

谢谢

【问题讨论】：

可能是因为您两次导入 jquery，而库使用的 jquery 对象与 test-empty.js 文件不同？
试过了，jquery导入没用，没有它仍然可以工作，我仍然得到同样的错误

标签： jquery typescript webpack babeljs

【解决方案1】：

所以我最终不得不使用expose-loader 和script-loader 来处理几个严重依赖于一些jQuery 插件的项目。以下确保我可以访问 jQuery 及其关联的插件。

// Example of my app.includes.js
require('expose-loader?jQuery!jquery');
require('expose-loader?$!jquery');

// Then require your plugins using the script-loader to execute them
// so they are part of the global jQuery object.
require('script-loader!your/jQuery/plugin/here')

然后我不得不将 app.includes.js 加入到我的 webpack 条目 app.js 中

// app.js
require('./app.inlcudes');

改变对导入的要求应该不会有什么坏处，你可以在 webpack.config.js 中包含 expose-loader规则也是如此。我有一些非常具体的原因为什么我的被内联使用。

【讨论】：