AngularJS und Vue.js mithilfe von Webpack in eine Anwendung integrieren?

Das mag etwas kompliziert erscheinen und die Antwort lautet wahrscheinlich „Tu das nicht, tu das“, also beginne ich mit dem Hintergrund dessen, was ich tue. Grundsätzlich habe ich eine ältere AngularJS-Anwendung, die wir von Vue nach Vue migrieren möchten. Wir hatten keine Möglichkeit, die Anwendung vollständig neu zu schreiben, sondern mussten dies Stück für Stück tun und gleichzeitig eine voll funktionsfähige Anwendung liefern.

Das übergeordnete Ziel besteht also darin, dass beide Frameworks gleichzeitig ausgeführt werden. Ich hoffe, dass ich etwas mit dem Routing tun oder meine Einzelseiten-App vielleicht in zwei separate Seiten für verschiedene Frameworks aufteilen kann. Ich habe AngularJS von der Verwendung der Gulp-Build-Pipeline auf die Verwendung von Webpack umgestellt, weil ich dachte, es sei der logische erste Schritt, um Vue zum Laufen zu bringen, aber jetzt bin ich auf eine Hürde gestoßen.

Das webpack.config.js, das ich zum Erstellen meiner Angular-App verwende, sieht so aus:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    target: 'web',
    // mode: "development",
    // devtool: "source-map",
    module: {
        rules: [

            {
                test: /\.html$/,
                loader: "html-loader",
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                  "style-loader",
                  "css-loader",
                  "sass-loader",
                ],
              },
              {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                  exposes: ["$", "jQuery"],
                },
              }
        ],
    },
    entry: {
        vendor: "./source/vendor.js",
        main: "./source/index.js",
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'distribution'),
        clean:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'source/index.html',
        })
    ]
};

Funktioniert jetzt gut, ich habe etwas, um das Ende hinzuzufügen, das wie zuvor funktioniert.

Dann habe ich ein Verzeichnis /source/vueJs hinzugefügt und den Inhalt des von vue create hello-world generierten Projekts „Hello World“ kopiert und eingefügt. Meine Hypothese ist, dass ich, wenn ich mein /source/vueJs 目录，并复制并粘贴了 vue create hello-world 生成的内容 hello world 项目。我的假设是，如果我可以修改我的 webpack.config.js ändern kann, um es zu erstellen, es weiter iterieren kann, um an den Punkt zu gelangen, an dem ich zwei funktionierende Apps zusammenführen kann, aber ich habe bereits Schwierigkeiten, das Hallo-Welt-Vue-Projekt dazu zu bringen, etwas zu produzieren Ding.

Bisher habe ich grundsätzlich alle relevanten AngularJS-Teile auskommentiert und hinzugefügt, was ich für richtig halte, um die Vue-App zu erstellen, also habe ich jetzt:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    target: 'web',
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [

            // {
            //     test: /\.html$/,
            //     loader: "html-loader",
            // },
            // {
            //     test: /\.s[ac]ss$/i,
            //     use: [
            //       "style-loader",
            //       "css-loader",
            //       "sass-loader",
            //     ],
            //   },
            //   {
            //     test: require.resolve("jquery"),
            //     loader: "expose-loader",
            //     options: {
            //       exposes: ["$", "jQuery"],
            //     },
            //   },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              },
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              // this will apply to both plain `.js` files
              // AND `<script>` blocks in `.vue` files
              {
                test: /\.js$/,
                loader: 'babel-loader'
              },
              // this will apply to both plain `.css` files
              // AND `<style>` blocks in `.vue` files
              {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
              }
        ],
    },
    entry: {
        // vendor: "./source/vendor.js",
        // angular: "./source/index.js",
        vue: "./source/vueJs/index.js"
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'distribution'),
        clean:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            //template: 'source/index.html',
        }),
        new VueLoaderPlugin()
    ],
};

Das funktioniert gut, ich erhalte eine distribution/ 目录，其中包含我的资产，但是所提供的站点运行起来就像根本没有运行 JavaScript 一样。比较我的版本上 npx webpack 的输出和 hello-world 项目上 npx vue-cli-service build Ausgabe, das Javascript ist ähnlich, unterscheidet sich aber in vielen Schlüsselbereichen. Zuerst schien es, als ob in meiner Version kein HTML eingebettet war, wie im Hallo-Welt-Projekt.

Wird der Versuch, eine Vue-App aus dem Webpack zu kompilieren, fehlschlagen? Sie können dies nur mit vue-cli-service build tun, also ist es auf Vue beschränkt? Ich habe versucht, meine vue.config.js mithilfe der Informationen unter https://cli.vuejs.org/guide/webpack.html und https://cli.vuejs.org/config/ zu ändern, aber ehrlich gesagt habe ich das Gefühl, dass ich Ich bin überfordert und bin mir nicht sicher, ob das, was ich tue, eine gute Idee ist.

Gibt es eine bessere Strategie, um mein Endziel zu erreichen? Wenn dies eine praktikable Lösung ist, welche Konfigurationsänderungen muss ich vornehmen, um die AngularJS- und Vue-Anwendungen ordnungsgemäß zu erstellen?

P粉301523298239 Tage vor329

AngularJS und Vue.js mithilfe von Webpack in eine Anwendung integrieren?

Antworte allen(1)Ich werde antworten