带有Webpack 2的jQuery

Abhilash DK

我的webpack.config.js如下所示：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var node_dir = __dirname + '/node_modules';
const autoprefixer = require('autoprefixer');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: ['tether',
    'font-awesome-loader',"bootstrap-loader","./js/client.js"],
  resolve: {
    extensions: ['.js', '.styl'],
    alias: {
      'jquery': node_dir + '/jquery/src/jquery.js',
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: 'url-loader?limit=10000',
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader',
      },
      {
      test: /\.styl$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'stylus-loader',
          /*options: {
            use: [stylus_plugin()],
          },*/
        },
      ],
    },
      // Use one of these to serve jQuery for Bootstrap scripts:

      // Bootstrap 4
      { test: /bootstrap\/dist\//, use: 'imports-loader?jQuery=jquery' },
    ]
  },
  output: {
    path: __dirname + "/dist/",
    filename: "client.min.js"
  },
  plugins:  [
    //new webpack.optimize.DedupePlugin(),
    //new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
      Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: "exports-loader?Util!bootstrap/js/dist/util",
    }),
    new webpack.LoaderOptionsPlugin({
      postcss: [autoprefixer],
    })
  ],
};

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React, Babel, Webpack 2</title>
  </head>
  <body class="container">
    <div id="app"></div>
    <script src="jquery.timeago.js"></script>
    <script src="client.min.js"></script>
    
  </body>
</html>

但是，当我尝试使用jQuery.timeago（）函数时，出现错误提示。

我正在关注React By Example本书。当我输入window.jQuery时，在jQuery之后出现了一些奇怪的数字。但是当我只输入jQuery时，我就变得不确定了。随着bootstrap 4和$ .ajax（）的正常运行，我确定包括了jQuery，但不确定为什么jQuery显示未定义。

任何人都可以解释一下如何包含jQuery以及我在做什么错。

掌声

将插件添加到webpack配置的插件部分，如下所示：

var webpack = require('webpack')
...

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  })
]

编辑：

您具有循环依赖性：

timeago: jquery
client: timeago jquery

但jquery与client同捆。尝试像这样在html中切换include js包：

<script src="client.min.js"></script>
<script src="jquery.timeago.js"></script>

代替：

<script src="jquery.timeago.js"></script>
<script src="client.min.js"></script>

如果这没有帮助，或者您遇到其他错误，则需要提取jquery以分离成束，并在之前包含它timeago。另一种方法是jquery，例如从cdn包括旧学校，并使webpack像这样知道：

externals: {
  jquery: 'jQuery'
}

要将jquery提取为单独的包并使其在timeago中可见，请使用如下序列：

<script src="common.js"></script>
<script src="jquery.timeago.js"></script>
<script src="client.min.js"></script>

并使用如下所示的webpack通用块插件：

entry: {
  common: ["jquery"],
  ...
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "common",
    filename: "common.js",
    minChunks: Infinity,
  })
],

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-10-22

我来说两句

0 条评论

登录后参与评论

上一篇：如何集中对齐TemplateField的标题文本？

带有Webpack 2的jQuery

带有Webpack 2的jQuery

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何检查字符串输入的格式

检查嵌套列表中的长度是否相同

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何自动选择正确的键盘布局？-仅具有一个键盘布局

如何正确比较 scala.xml 节点？

在令牌内联程序集错误之前预期为 ')'

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

解决类Koin的实例时出错

ES5的代理替代

有什么解决方案可以将android设备用作Cast Receiver？

VBA 自动化错误：-2147221080 (800401a8)

套接字无法检测到断开连接