在 Webpack 中加载 jEditable 库

Question

我尝试包含 jQuery 插件 Jeditable as a webpack module from bower. I use bower-webpack-plugin 以包含一些库，但在这种情况下不起作用。

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js',
        publicPath: 'http://localhost:8090/assets'
    },
    devtool: 'evil-source-map',
    module: {
        loaders: [
            {   
                test: /\.js[x]?$/, 
                loaders: ['react-hot', 'jsx', 'babel'],
                exclude: /node_modules/ 
              },
              {
                test: /\.scss$/,
                loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
              }
        ]
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
    externals: {
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

bower.json

{
  "name": "Won",
  "version": "0.0.1",
  "description": "Internal app",
  "main": "index.js",
  "authors": [
    "and"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "jquery": "~2.1.4",
    "babel-polyfill": "~0.0.1",
    "bootstrap": "~3.3.5",
    "col-resizable": "*",
    "datatables": "~1.10.8",
    "immutable": "~3.7.4",
    "jeditable": "~1.7.3",
    "jquery-resizable-columns": "~0.2.3",
    "jquery-ui": "~1.11.4",
    "kefir": "~2.8.0",
    "lodash": "~3.10.1"
  }
}

起初我得到错误：

未捕获类型错误：$(...).find(...).editable 不是函数

然后我尝试添加 Jeditable 插件

var editable = require('jeditable') 或

var editable = require('jquery.jeditable')

但我收到类似

的错误

Module not found: Error: Cannot resolve module 'jeditable' in ...

然后我试了

var editable = require('../../bower_components/jeditable/jquery.jeditable')

我收到错误

Uncaught ReferenceError: jQuery is not defined
(anonymous function) @ jquery.jeditable.js:494

然后我尝试添加 Jquery:

var jQuery = require('../../bower_components/jeditable/js/jquery')
var editable = require('../../bower_components/jeditable/jquery.jeditable')

但我得到错误：

./bower_components/jeditable/js/jquery.js
Module build failed: SyntaxError: /Users/an/Won_webpack_25_08/bower_components/jeditable/js/jquery.js: 'with' in strict mode (2907:13)

2905 |  var left = 0, top = 0, elem = this[0], results;
  2906 |    
> 2907 |    if ( elem ) with ( jQuery.browser ) {
       |              ^
  2908 |        var absolute     = jQuery.css(elem, "position") == "absolute", 
  2909 |            parent       = elem.parentNode, 
  2910 |            offsetParent = elem.offsetParent,

Answer 1

当我添加 window.jQuery = $; 时，它现在可以工作了

在 Webpack 中加载 jEditable 库

Loading jEditable library in Webpack

jeditable

bower

webpack