javascript - windows下Akeneo安装/Webpack报错

Question

我在 Windows 下安装 Akeneo PIM 时遇到问题；

我跟进了akeneo-install-instruction（pim-community-standard-v2.3）

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

并对 package.json 进行必要的修改，就像这里所说的： Akeneo 安装 / NODE_PATH=node_modules notrecognized / yarn run webpack Error

然后我添加了 webpack，就像在这里完成的那样： 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 Unexpected token (1:16) 您可能需要适当的加载程序来处理此文件类型。| 导入 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 ...

我究竟做错了什么？

更新： webpack.config.js 文件的内容：

/* 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 <[e-mail]>
 * @author    Filips Alpe <[e-mail]>
 * @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;

标签： javascriptnode.jswebpackakeneo