Перейдите на Webpack для перехода на старый веб-сайт - генерация поставщиков из не npm зависимостей - PullRequest
Новая
       7

Перейдите на Webpack для перехода на старый веб-сайт - генерация поставщиков из не npm зависимостей

0 голосов
/ 10 марта 2020

Мы хотим перейти с gulp на webpack на довольно большом и старом сайте. Gulp просто concat и минимизировать JS & CSS файлы в данный момент. Я хочу перейти на веб-пакет, потому что другой передний разработчик создал несколько реагирующих модулей, скомпилированных с помощью browserify cmd в другой папке:

мы работаем в папке webappapp /, минимизированные файлы находятся здесь: 

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

Моя цель состоит в том, чтобы разделить этот файл на javascript, используя два файла, app.js и vendors.js. Эти 2 файла должны быть, в идеале, файлами ES6, которые импортируют другие файлы.

На самом деле я ищу способ сделать простую конкатенацию / минимизацию файлов JS через 2 файла es6 с импортом. Webpack проверяет наличие зависимостей и для устранения ошибок «jquery не определено», я добавил webpack.providePlugin и resolve.alias часть в webpack.config. Но это загружает jquery в мой app.min.js файл, и я не хочу, чтобы это было сделано в целях производительности. Я знаю, что все библиотеки должны быть npm установлены и необходимы / импортированы в контексте es6 для оптимизированного использования веб-пакетов, но некоторые старые jquery библиотеки недоступны на npm в той версии, которую я хочу, поэтому мне нужно go с файлами уже в проекте.

вендоров. js: 

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

app. 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 / future отсутствует в активах папка) и webpack успешно запущен, я просто хочу найти чистый способ выполнить простое concat / minify без включения jquery в файл приложения, прежде чем идти дальше.

1 Ответ

1 голос
/ 10 марта 2020

Вот пример использования jquery в html файле external Что касается имен приложений и поставщиков, вы должны изменить эту часть 

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 для импорта, если вы хотите, чтобы он был добавлен извне. Удалите jquery у поставщиков. js

Надеюсь, я помог.

...