javascript - 将所见即所得文本编辑器 jquery 插件与 webpack 捆绑在一起

Question

我正在使用旧版 jquery/bootstrap web 应用程序，我正在将其转换为 node.js/webpack 项目。我能够让其中大部分工作正常运行，但只有一个元素是所见即所得文本编辑器。

原来项目使用this editor ，但它不再维护，而且我无论如何也无法从 github 将其安装到 npm install 。这时我开始在 google-fu 上寻找替代品，并发现 this .

它需要全局命名空间中的 Handlebars 和范围，但这并不是结束。到目前为止，无论我尝试什么，我都无法克服错误:

vendor.bundle.js:13993 Uncaught TypeError: Cannot read property 'fn' of undefined

有问题的行是:

$.fn.wysihtml5

这是我不明白的，既然 jquery 位于全局命名空间中，为什么它是“未定义”？

var App = function() {

    var uiInit = function() {

        $('.textarea-editor').wysihtml5();

    };

    return {
        init: function() {
            uiInit();
        }

    };
}();

$(function(){ App.init(); });

package.json:

{
  "name": "wysihtml-problem",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "fbielejec",
  "license": "LGPL",
  "dependencies": {
    "jquery": "^2.2.0",
        "handlebars": "^4.0.5",
        "rangy": "^1.3.0",
    "bootstrap3-wysihtml5-commonjs": "0.0.4"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.7.1",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

  entry: {
    app: "./app.js",
    vendor: ["jquery", "rangy", "wysihtml5"],
  },

  output: {
    path: __dirname + '/dist',
    filename: "bundle.js"
  },

  resolve: {
    alias: {
      handlebars: 'handlebars/dist/handlebars.min.js',
      rangy: "rangy/lib/rangy-core.js",
      wysihtml5: "bootstrap3-wysihtml5-commonjs",
    }
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: "wysihtml-webpack"
    }),
    new webpack.optimize.CommonsChunkPlugin(chunkName = "vendor", filename = "vendor.bundle.js"),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': "jquery",
      rangy: "rangy",
    })
  ]

};

Answer 1

看起来 jQuery 会尝试内省(introspection)环境，并且如果它发现环境有一个模块系统(并且它从 Webpack 中找到了一个)，则不会污染全局命名空间。

使用此代码获取对 jQuery 对象的引用:

var $ = require('jquery')

您还可以在窗口上手动分配$:

window.$ = require('jQuery')

但更倾向于使用第一个选项，因为它会产生更易于维护的代码并允许进一步优化(例如，webpack 的模块使用 jQuery 并相应地将包拆分为多个 block )。