时间戳

首页 > 解决方案 > 在旧网站上 Gulp 到 Webpack 迁移 - 从非 npm 依赖项生成供应商

javascript - 在旧网站上 Gulp 到 Webpack 迁移 - 从非 npm 依赖项生成供应商

问题描述

我们想在一个相当大的老网站上从 gulp 迁移到 webpack。Gulp 目前只是连接和缩小 JS 和 CSS 文件。我想迁移到 webpack，因为另一个前端开发人员在另一个文件夹中制作了一些由 browserify cmd 编译的反应模块：

我们在 webapp/ 文件夹中工作，缩小的文件位于此处：

js/app.min.js
jslib/vendors.min.js
css/app.min.css

源文件是：

js/
  file1.js
  file2.js
  ...
jslib/
  jquery-1.11.2.min.js
  jquery.fancybox.js
  ...
  jquery.very-old-dependency-not-on-npm.min.js

css/
  style.css
  extra.css

我的目标是通过使用两个文件app.js和vendors.js. 理想情况下，这两个文件应该是导入其他文件的 ES6 文件。

实际上，我正在寻找一种方法来通过 2 个带有导入的 es6 文件对 JS 文件进行简单的连接/缩小。Webpack 正在检查依赖项并克服“jquery 未定义”错误，我在 webpack.config 中添加了webpack.providePluginand部分。resolve.alias但这会在我的app.min.js文件中加载 jquery，我不希望它出于性能目的。我知道所有库都应该在 es6 上下文中安装和需要/导入以优化 webpack 使用，但是在我想要的版本中，一些旧的 jquery 库在 npm 上不可用，所以我必须使用已经在项目。

供应商.js：

import "./jquery-1.11.2.min.js";
import "./jquery.fancybox.js"

应用程序.js：

import "./file1.js"
import "./file2.js"

webpack.config.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    '/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
    '/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].min.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
  ],
  resolve: {
    alias: {
      jquery: path.resolve(__dirname+'/../../jslib/jquery-1.11.2.min.js')
    },
  },
}

我所有的路径都正常（当前 gulp / 未来 webpack 的文件夹位置不在 assets 文件夹中）并且 webpack 成功运行，我只想找到一种干净的方法来执行简单的 concat / minify 而不在我的应用程序文件中包含 jquery在更进一步之前。

标签： javascriptjquerywebpackwebpack-4

解决方案

这里是一个在外部html文件中使用jquery的例子 至于app和vendor的名字，这部分必须改

entry: {
  '/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
  '/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
},

为了这

entry: {
  app: path.resolve(__dirname + '/../../js/app.js'),
  vendors: path.resolve(__dirname + '/../../jslib/vendors.js'),
},

如果您希望从外部添加 jquery，请不要将其添加到导入中。从 vendor.js 中删除 jquery

我希望我有所帮助。

推荐阅读