Настройка Webpack для построения только Vue Single-File-Components, используемых в AngularJS (1.x) - PullRequest
Новая
       1

Настройка Webpack для построения только Vue Single-File-Components, используемых в AngularJS (1.x)

0 голосов
/ 26 апреля 2020

У нас есть приложение AngularJS, созданное без использования модулей (не требуется / import / export et c.). Мы начали переход на Vue. js (в настоящее время используется 2.6.x), используя ng Vue. В настоящее время каждый компонент Vue находится в своем собственном файле. js и зарегистрирован следующим образом: 

const componentName = Vue.component('component-name', {component script})

Мы хотели бы начать использовать Single-File-Components с Webpack и Vue -Loader. Я провел некоторое исследование и придумал следующие файлы конфигурации Webpack:

webpack.common. js

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

module.exports = {
    entry: {
        main: './VueApp/src/index.js',
    },
    module: {
        rules: [{
                test: /\.vue$/,
                use: ['vue-loader'],
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use: {
                    loader: ['file-loader'],
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'imgs',
                    },
                },
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

webpack.dev. js

const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
    mode: "development",
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "app/dist"),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./app/template.html",
        }),
    ],
    module: {
        rules: [{
            test: /.\scss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
        }, ],
    },
});

webpack.prod. js

const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "[name].[contentHash].bundle.js",
        path: path.resolve(__dirname, "VueApp/dist"),
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(),
            new TerserPlugin(),
            new HtmlWebpackPlugin({
                template: "./app/template.html",
                minify: {
                    removeAttributeQuotes: true,
                    collapseWhitespace: true,
                    removeComments: true,
                },
            }),
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[contentHash].css"
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [{
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        }, ],
    },
});

И, наконец, в своем файле package.json я добавил скрипт: "build-vue": "webpack --config webpack.prod.js"

Чтобы проверить эту настройку, я создал два очень простых компонента: * baseButton. vue**

<template>
  <button @click="onClick" id="mainButton">
    <slot></slot>
  </button>
</template>

<script>
export default {
  methods: {
    onClick() {
      emit(this.onClickAction);
    },
  },
  props: {
    onClickAction: {
      type: String,
      default: 'buttonClicked',
    },
  },
};
</script>

<style>
#button {
  background-color: teal;
  color: white;
}
</style>

viewWithButton. vue

<template>
  <div>
    <h1>Base Button Example</h1>
    <baseButton> Example Button </baseButton>
  </div>
</template>

<script>
import baseButton from './components/baseButton.vue';
export default {
  components: {
    baseButton,
  },
};
</script>

<style></style>

Я также создал базовый c index. js file: 

import viewWithButton from './src/app/views/viewWithButton';

Когда я запускаю скрипт сборки webpack (либо напрямую или используя npm запустить сборку- vue) Я получаю следующее сообщение об ошибке: 


/Users/eladedri/classe/code/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

TypeError: loaderContext.emitError is not a function
    at new module.exports (/Users/eladedri/classe/code/node_modules/vue-loader/lib/index.js:36:19)
    at Object.<anonymous> (/Users/eladedri/classe/code/webpack.common.js:27:3)
    at Module._compile (/Users/eladedri/classe/code/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (/Users/eladedri/classe/code/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/eladedri/classe/code/webpack.prod.js:2:16)
    at Module._compile (/Users/eladedri/classe/code/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (/Users/eladedri/classe/code/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/Users/eladedri/classe/code/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/Users/eladedri/classe/code/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /Users/eladedri/classe/code/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/eladedri/classe/code/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /Users/eladedri/classe/code/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/Users/eladedri/classe/code/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
    at /Users/eladedri/classe/code/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/eladedri/classe/code/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/eladedri/classe/code/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! classe@1.0.0 build-vue: `webpack --config webpack.prod.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the classe@1.0.0 build-vue script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eladedri/.npm/_logs/2020-04-26T12_11_40_894Z-debug.log

Эта ошибка мне кажется крипти c, поэтому я надеялся, что кто-нибудь будет иметь некоторую информацию об этом. Я не уверен, что можно даже настроить Webpack с помощью vue -loader, чтобы упаковать только файлы Vue в файлы. js, поэтому, если кто-нибудь сможет указать мне правильное направление, это будет очень полезно.

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...