webpack捆绑wysiwyg文本编辑器jquery插件

Bundling wysiwyg text editor jquery plugin with webpack

本文关键字：编辑器 jquery 插件 文本编辑 文本 捆绑 wysiwyg webpack      更新时间：2023-09-26

我正在使用一个遗留的jquery/bootstrap webapp，我正在把它变成一个node.js/webpack项目。我能够让它的大部分工作，但对于一个元素，wysiwyg文本编辑器。

最初项目使用这个编辑器，但它不再维护，我无法从github上获得npm install。这时，我开始在谷歌上搜索fu，想找到一个可插入的替代品，然后找到了这个。

它在全局命名空间中需要把手和范围，但这并不是结束。到目前为止，无论我做了什么，我都无法克服这个错误:

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",
    })
  ]
};

看起来像jQuery试图自省环境，如果它看到环境有一个模块系统(并且它从Webpack中找到一个)，它不会污染全局命名空间。

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

var $ = require('jquery')

您也可以在window上手动分配$:

window.$ = require('jQuery')

，但使用第一个选项是更可取的，因为它会产生更易于维护的代码，并允许进一步的优化(例如webpack，它的模块使用jQuery并相应地将bundle分成几个块)。

相关文章：