Установка Akeneo под windows/ошибка Webpack

У меня проблема с установкой Akeneo PIM под Windows;

Я следую инструкциям по установке akeneo (pim-community-standard-v2.3)

https://docs.akeneo.com/2.3/install_pim/manual/installation_ce_archive.html

и внесите необходимые изменения в package.json, как сказано здесь: webpack-e">Установка Akeneo / NODE_PATH=node_modules не распознан / пряжа запускает ошибку веб-пакета

Затем я добавил веб-пакет, как это было сделано здесь: https://webkul.com/blog/yarn-run-webpack-issues-in-akeneo/ с: npm install --save-dev webpack npm install

Но я всегда получаю ошибки после запуска: yarn run webpack

ОШИБКА в ./web/bundles/pimenrich/js/catalog-volume/header.ts Ошибка синтаксического анализа модуля: C:\xampp\htdocs\pim-community-standard\web\bundles\pimenrich\js\catalog-volume\header. ts Неожиданный токен (1:16) Для обработки файлов этого типа может потребоваться соответствующий загрузчик. | import BaseView = require('pimenrich/js/view/base'); | импортировать * как _ из 'подчеркивания'; | @ ./web/js/module-registry.js 2:19263-19307 @ ./vendor/akeneo/pim-community-dev/webpack/require-context.js @ ./web/bundles/pimenrich/js/form/ builder.js @ ./web/bundles/pimenrich/js/index.js @ multi babel-polyfill ./web/bundles/pimenrich/js/index.js ...

Что я делаю не так?

UPDATE: The content of webpack.config.js file:

/* eslint-env es6 */
const fs = require('fs');
const process = require('process');
const rootDir = process.cwd();
const webpack = require('webpack');
const path = require('path');
const _ = require('lodash');

const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');

const isProd = process.argv && process.argv.indexOf('--env=prod') > -1;
const sourcePath = path.join(rootDir, 'web/js/require-paths.js');

if (!fs.existsSync(sourcePath)) {
  throw new Error(`The web/js/require-paths.js module does not exist - You need to run
    "bin/console pim:install" or "bin/console pim:installer:dump-require-paths" before
    running webpack \n`);
}

const {getModulePaths, createModuleRegistry} = require('./webpack/requirejs-utils');
const {aliases, config} = getModulePaths(rootDir, __dirname, sourcePath);

createModuleRegistry(Object.keys(aliases), rootDir);

const babelPresets = [
  [
    'babel-preset-env',
    {
      targets: {
        browsers: ['firefox >= 45'],
      },
    },
  ],
];

if (isProd) {
  babelPresets.push('babel-preset-minify');
}

console.log('Starting webpack from', rootDir, 'in', isProd ? 'prod' : 'dev', 'mode');

module.exports = {
  stats: {
    hash: false,
    maxModules: 5,
    modules: false,
    timings: true,
    version: true,
  },
  target: 'web',
  entry: ['babel-polyfill', path.resolve(rootDir, './web/bundles/pimenrich/js/index.js')],
  output: {
    path: path.resolve('./web/dist/'),
    publicPath: '/dist/',
    filename: '[name].min.js',
    chunkFilename: '[name].bundle.js',
  },
  devtool: 'source-map',
  resolve: {
    symlinks: false,
    alias: _.mapKeys(aliases, (path, key) => `${key}$`),
    modules: [path.resolve('./web/bundles'), path.resolve('./node_modules')],
    extensions: ['.js', '.json', '.ts', '.tsx'],
  },
  module: {
    rules: [
      // Inject the module config (to replace module.config() from requirejs)
      {
        test: /\.js$/,
        exclude: /\/node_modules\/|\/spec\//,
        use: [
          {
            loader: path.resolve(__dirname, 'webpack/config-loader'),
            options: {
              configMap: config,
            },
          },
        ],
      },

      // Load html without needing to prefix the requires with 'text!'
      {
        test: /\.html$/,
        exclude: /node_modules|spec/,
        use: [
          {
            loader: 'raw-loader',
            options: {},
          },
        ],
      },

      // Expose the Backbone variable to window
      {
        test: /node_modules\/backbone\/backbone.js/,
        use: [
          {
            loader: 'expose-loader',
            options: 'Backbone',
          },
        ],
      },
      {
        test: /node_modules\/backbone\/backbone.js/,
        use: [
          {
            loader: 'imports-loader',
            options: 'this=>window',
          },
        ],
      },
      {
        test: /node_modules\/summernote\/dist\/summernote.js/,
        use: [
          {
            loader: 'imports-loader',
            options: 'require=>function(){}',
          },
          {
            loader: 'imports-loader',
            options: 'require.specified=>function(){}',
          },
        ],
      },
      // Expose jQuery to window
      {
        test: /node_modules\/jquery\/dist\/jquery.js/,
        use: [
          {
            loader: 'expose-loader',
            options: 'jQuery',
          },
          {
            loader: 'expose-loader',
            options: '$',
          },
        ],
      },

      // Expose the require-polyfill to window
      {
        test: path.resolve(__dirname, './webpack/require-polyfill.js'),
        use: [
          {
            loader: 'expose-loader',
            options: 'require',
          },
        ],
      },

      // Process the pim webpack files with babel
      {
        test: /\.js$/,
        include: /(web\/bundles|webpack|spec)/,
        exclude: /lib|node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: babelPresets,
            cacheDirectory: 'web/cache',
          },
        },
      },

      // Process the typescript loader files
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: path.resolve(__dirname, 'tsconfig.json'),
              context: path.resolve(rootDir),
            },
          },
          {
            loader: path.resolve(__dirname, 'webpack/config-loader'),
            options: {
              configMap: config,
            },
          },
        ],
        include: /(web\/bundles)/,
        exclude: /lib|node_modules|vendor|tests|src|packages/,
      },
    ],
  },

  watchOptions: {
    ignored: /node_modules|app|app\/cache|vendor/,
  },

  // Support old loader declarations
  resolveLoader: {
    moduleExtensions: ['-loader'],
  },

  plugins: [
    // Clean up the dist folder and source maps before rebuild
    new WebpackCleanupPlugin(),

    // Map modules to variables for global use
    new webpack.ProvidePlugin({_: 'underscore', Backbone: 'backbone', $: 'jquery', jQuery: 'jquery'}),

    // Ignore these directories when webpack watches for changes
    new webpack.WatchIgnorePlugin([
      path.resolve(rootDir, './node_modules'),
      path.resolve(rootDir, './app'),
      path.resolve(rootDir, './app/cache'),
      path.resolve(rootDir, './vendor'),
    ]),

    // Inject live reload to auto refresh the page (hmr not compatible with our app)
    new LiveReloadPlugin({appendScriptTag: true, ignore: /node_modules/}),

    // Split the app into chunks for performance
    new webpack.optimize.CommonsChunkPlugin({
      name: 'lib',
      minChunks: module => module.context && module.context.indexOf('lib') !== -1,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: module => module.context && module.context.indexOf('node_modules') !== -1,
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isProd ? JSON.stringify('production') : JSON.stringify('development'),
    }),
    new webpack.optimize.CommonsChunkPlugin({name: 'manifest'}),
  ],
};

ОБНОВЛЕНИЕ: содержимое файла web\bundles\pimenrich\js\view\base.ts:

import * as _ from 'underscore';
import * as JQuery from 'jquery';
import * as Backbone from 'backbone';
import View from 'pimenrich/js/view/base-interface';
const mediator = require('oro/mediator');

/**
 * View base class
 *
 * @author    Julien Sanchez <[email protected]>
 * @author    Filips Alpe <[email protected]>
 * @copyright 2015 Akeneo SAS (http://www.akeneo.com)
 * @license   http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
class BaseView extends Backbone.View<any> implements View {
  private parent: View | null = null;
  private extensions: {[code: string]: View};

  readonly preUpdateEventName: string = 'pim_enrich:form:entity:pre_update';
  readonly postUpdateEventName: string = 'pim_enrich:form:entity:post_update';

  public code: string = 'form';
  public configured: boolean;
  public zones: {[code: string]: any};
  public targetZone: string;
  public position: number;

  /**
   * {@inheritdoc}
   */
  constructor(config: any) {
    super(config);

    this.extensions = {};
    this.zones = {};
    this.targetZone = '';
    this.configured = false;
  }

  /**
   * Configure the extension and its child extensions
   *
   * @return {JQueryPromise<any>}
   */
  configure(): JQueryPromise<any> {
    if (null === this.parent) {
      this.model = new Backbone.Model();
    }

    const extensionPromises = Object.values(this.extensions).map((extension: View) => {
      return extension.configure();
    });

    return JQuery.when(...extensionPromises).then(() => {
      this.configured = true;
    });
  }

  /**
   * Add a child extension to this extension
   *
   * @param {string} code      Extension's code
   * @param {View}   extension Backbone module of the extension
   * @param {string} zone      Targeted zone
   * @param {number} position  The position of the extension
   */
  addExtension(code: string, extension: View, zone: string, position: number) {
    extension.setParent(this);

    extension.code = code;
    extension.targetZone = zone;
    extension.position = position;

    if (undefined === this.extensions || null === this.extensions) {
      throw 'this.extensions have to be defined. Please ensure you called parent initialize() method.';
    }

    this.extensions[code] = extension;
  }

  /**
   * Get a child extension (the first extension matching the given code or ends with the given code)
   *
   * @param  {string} code
   * @return {View}
   */
  getExtension(code: string): View {
    const extensionKey = _.findKey(this.extensions, (extension: View) => {
      const expectedPosition = extension.code.length - code.length;

      return expectedPosition >= 0 && expectedPosition === extension.code.indexOf(code, expectedPosition);
    });

    return this.extensions[extensionKey];
  }

  /**
   * Set the parent of this extension
   *
   * @param {View} parent
   */
  setParent(parent: View) {
    this.parent = parent;
  }

  /**
   * Get the parent of the extension
   *
   * @return {View | null}
   */
  getParent(): View | null {
    return this.parent;
  }

  /**
   * Get the root extension
   *
   * @return {View}
   */
  getRoot(): View {
    let rootView = <View>this;
    let parent = this.getParent();

    while (null !== parent) {
      rootView = parent;
      parent = parent.getParent();
    }

    return rootView;
  }

  /**
   * Set data in the root model
   *
   * @param {any}                data
   * @param {{silent?: boolean}} options If silent is set to true, don't fire events
   *                                       pim_enrich:form:entity:pre_update and pim_enrich:form:entity:post_update
   */
  setData(data: any, options: {silent?: boolean} = {}) {
    if (!options.silent) {
      this.getRoot().trigger(this.preUpdateEventName, data);
    }

    this.getRoot().model.set(data, options);

    if (!options.silent) {
      this.getRoot().trigger(this.postUpdateEventName, data);
    }
  }

  /**
   * Get the form raw data (vanilla javascript object)
   *
   * @return {any}
   */
  getFormData(): any {
    return this.getRoot().model.toJSON();
  }

  /**
   * Get the form data (backbone model)
   *
   * @return {Backbone.Model}
   */
  getFormModel(): Backbone.Model {
    return this.getRoot().model;
  }

  /**
   * Called before removing the form from the view
   */
  shutdown() {
    this.doShutdown();

    Object.values(this.extensions).forEach((extension: View) => extension.shutdown());
  }

  /**
   * The actual shutdown method called on all extensions
   */
  doShutdown() {
    this.stopListening();
    this.undelegateEvents();
    this.$el.removeData().unbind();
    this.remove();

    Backbone.View.prototype.remove.call(this);
  }

  /**
   * {@inheritdoc}
   */
  render(): View {
    if (!this.configured) {
      return this;
    }

    return this.renderExtensions();
  }

  /**
   * Render the child extensions
   *
   * @return {View}
   */
  renderExtensions(): View {
    // If the view is no longer attached to the DOM, don't render the extensions
    if (undefined === this.el) {
      return this;
    }

    this.initializeDropZones();

    Object.values(this.extensions).forEach((extension: View) => {
      this.renderExtension(extension);
    });

    return this;
  }

  /**
   * Render a single extension
   *
   * @param {View} extension
   */
  renderExtension(extension: View) {
    var zone = this.getZone(extension.targetZone);

    if (null === zone) {
      throw new Error(
        `Can not render extension "${extension.code}" in "${this.code}": zone "${extension.targetZone}" does not exist`
      );
    }

    zone.appendChild(extension.el);

    extension.render();
  }

  /**
   * Initialize dropzone cache
   */
  initializeDropZones() {
    this.zones = this.$('[data-drop-zone]')
      .toArray()
      .reduce((zones: {[code: string]: HTMLElement}, zone: HTMLElement) => {
        return {...zones, [<string>zone.dataset.dropZone]: zone};
      }, {});

    this.zones['self'] = this.el;
  }

  /**
   * Get the drop zone for the given code
   *
   * @param {string} code
   *
   * @return {HTMLElement | null}
   */
  getZone(code: string): HTMLElement | null {
    if (!(code in this.zones)) {
      this.zones[code] = this.el.querySelector(`[data-drop-zone="${code}"]`);
    }

    if (!this.zones[code]) {
      return null;
    }

    return this.zones[code];
  }

  /**
   * Trigger event on each child extensions and their childs
   */
  triggerExtensions() {
    const options = Object.values(arguments);

    Object.values(this.extensions).forEach(extension => {
      extension.trigger.apply(extension, options);
      extension.triggerExtensions.apply(extension, options);
    });
  }

  /**
   * Listen on child extensions and their childs events
   *
   * @param {string}   code
   * @param {Function} callback
   */
  onExtensions(code: string, callback: any) {
    Object.values(this.extensions).forEach((extension: View) => {
      this.listenTo(extension, code, callback);
    });
  }

  /**
   * Get the root form code
   *
   * @return {string}
   */
  getFormCode(): string {
    return this.getRoot().code;
  }

  /**
   * Listen to given mediator events to trigger them locally (in the local root).
   * This way, extensions attached to this form don't have to listen "globally" on the mediator.
   *
   * @param {{[mediatorEvent: string]: string}} mediator events to forward:
   *                {'mediator:event:name': 'this:event:name', ...}
   */
  forwardMediatorEvents(events: {[mediatorEvent: string]: string}) {
    Object.keys(events).forEach((localEvent: string) => {
      const mediatorEvent = events[localEvent];

      this.listenTo(mediator, mediatorEvent, (...args: any[]) => {
        this.trigger(localEvent, ...args);
      });
    });
  }
}

export = BaseView;


person Bizboss    schedule 11.10.2018    source источник
comment
Не могли бы вы обновить свой пост, указав содержимое файла webpack.config.js?   -  person David R    schedule 11.10.2018
comment
@DavidR: сообщение обновлено.   -  person Bizboss    schedule 11.10.2018
comment
@Bizbozz Проверьте мой ответ ниже и посмотрите, поможет ли он.   -  person David R    schedule 11.10.2018
comment
Не могли бы вы опубликовать содержание pimenrich/js/view/base. Похоже, у вас нет загрузчика для этого конкретного типа файлов.   -  person Artem    schedule 13.10.2018
comment
@Artem: Файл уже существует, я не знаю, что именно вы имеете в виду под загрузчиком для него...   -  person Bizboss    schedule 13.10.2018
comment
Для информации я не редактировал ни один файл, но файл конфигурации, это установка по умолчанию...   -  person Bizboss    schedule 13.10.2018
comment
@Bizboss webpack в основном говорит, что не может загрузить этот конкретный файл. Какой мим-тип у него есть? Что внутри?   -  person Artem    schedule 13.10.2018
comment
@Artem, это файл .ts, я отредактировал свой пост.   -  person Bizboss    schedule 13.10.2018
comment
@Bizboss Хорошо, спасибо. Теперь я начинаю видеть всю картину. Можете ли вы предоставить полную трассировку стека ошибок?   -  person Artem    schedule 13.10.2018
comment
Давайте продолжим обсуждение в чате.   -  person Artem    schedule 13.10.2018
comment
@Bizboss в посте вы сказали, что UPDATE: The content of the web\bundles\pimenrich\js\view\base.tf file означает, что файл base является файлом Terraform, но в комментариях вы сказали, что это файл .ts, что означает typescript файл. вы уверены, что не сохранили файл в формате .tf вместо формата .ts   -  person evgeni fotia    schedule 17.10.2018
comment
@evgenifotia Извините, это была опечатка: правильное расширение файла — .ts. Сейчас я исправлю свое обновление :)   -  person Bizboss    schedule 17.10.2018
comment
Вы пытались запустить установку пряжи раньше?   -  person Freelancer    schedule 18.10.2018
comment
@Фрилансер, да, конечно   -  person Bizboss    schedule 18.10.2018