Использование Webpack только для генерации комплекта поставщиков - PullRequest
Новая
       27

Использование Webpack только для генерации комплекта поставщиков

0 голосов
/ 26 сентября 2019

В настоящее время мы используем Bower для внешних зависимостей нашего AngularJS проекта и задачу bower-concat Grunt для компиляции нашего bower_components в libraries.js файл.Аналогичным образом мы объединяем CSS-файлы библиотеки в libraries.css.

. Заглядывая в будущее, мы хотим перейти на использование NPM и Webpack.Желательно, чтобы мы изначально хотели использовать Webpack только для создания пакета поставщика, который затем заменил бы наш файл library.js.Мы также хотели бы использовать Webpack для объединения CSS-файлов наших поставщиков.В настоящее время мы хотели бы продолжать использовать обычную задачу Concat Grunt для логики приложения и CSS.По сути, мы хотим использовать как можно меньше кода приложения в этом переключателе.

Я попытался сделать это, переместив все свои зависимости с bower.json на package.json и исправив номера версий и имена пакетов.где необходимо, а затем создаю файл index.j s, в который я импортирую все зависимости.

Мой webpack.config.js в настоящее время выглядит следующим образом: 

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'src/main/webapp/app/js')
    },
    module: {
        rules: [
            {
                test: /\/.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

Этот код создает файлы main.bundle.js и main~vendor.bundle.js, но включает файлы в нашем HTML-шаблоне.и загрузка приложения немедленно приводит к ошибке в консоли:

Uncaught ReferenceError: angular не определен

Поиск в Google возвращает мало результатов, так как все сообщения насубъект предполагает полное переключение на Webpack.

В конечном итоге мой вопрос сводится к следующему: «Можете ли вы использовать Webpack для создания ТОЛЬКО пакета поставщика, который затем может быть включен в файл Thymeleaf-style HTML, и если да, то как?»

1 Ответ

0 голосов
/ 27 сентября 2019

Я сделал быстрый тест: 

//index.js
import angular from 'angular';
import angularAnimate from 'angular-animate';
import uirouter from '@uirouter/angularjs';

//src/main/webapp/app/js/app.js
angular
  .module('app', ['ui.router', 'ngAnimate'])
  .component('com', { template: 'hello' });

<!-- src/main/webapp/app/index.html -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="js/main.bundle.js"></script>
    <script src="js/vendors~main.bundle.js"></script>
    <script src="js/app.js"></script>
    <script>
        console.log(angular.version);
    </script>
</head>
<body>
    <com></com>
</body>
</html>

Выходы:

Объект {полный: "1.7.8", основной: 1, младший: 7, точка: 8, codeName: «восторженное отношение»}

И этот компонент выдает «привет».

Итак, вы делаете что-то другое?

...