在 Webpack 中加载 jEditable 库答案

【问题标题】：Loading jEditable library in Webpack在 Webpack 中加载 jEditable 库
【发布时间】：2015-08-25 21:12:04
【问题描述】：

我尝试将 jQuery 插件 Jeditable 包含为 bower 的 webpack 模块。我使用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"
  }
}

起初我得到错误：

Uncaught TypeError: $(...).find(...).editable is not a function

然后我尝试添加 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,

【问题讨论】：

标签： bower webpack jeditable

【解决方案1】：

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

【讨论】：