Question

嗨我在prestashop主题上运行npm run build时遇到错误，我不知道它来自哪里。

错误如下：

SyntaxError: Unexpected token: string (expose?Tether!tether) [./js/theme.js:25,7]

我的webpack.config.js看起来像这样：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var plugins = [];

var production = true;

if (production) {
    plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    );
}

plugins.push(
    new ExtractTextPlugin(
        path.join(
            '..', 'css', 'theme.css'
        )
    )
);

module.exports = {
    entry: [
        './js/theme.js'
    ],
    output: {
        path: '../assets/js',
        filename: 'theme.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel-loader']
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract(
                "style",
                "css?sourceMap!postcss!sass?sourceMap"
            )
        }, {
            test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
            loader: 'file-loader?name=../css/[hash].[ext]'
        }, {
            test: /\.css$/,
            loader: "style-loader!css-loader!postcss-loader"
        }]
    },
    postcss: function() {
        return [require('postcss-flexibility')];
    },
    externals: {
        prestashop: 'prestashop',
        $: '$',
        jquery: 'jQuery'
    },
    devtool: 'source-map',
    plugins: plugins,
    resolve: {
        extensions: ['', '.js', '.scss']
    }
};

抛出错误的文件是theme.js

import 'expose/Tether/tether';
import 'bootstrap/dist/js/bootstrap.min';
import 'flexibility';
import 'bootstrap-touchspin';

import '../css/theme';
import './responsive';
import './checkout';
import './customer';
import './listing';
import './product';
import './cart';

import DropDown from './components/drop-down';
import Form from './components/form';
import ProductMinitature from './components/product-miniature';
import ProductSelect from './components/product-select';
import TopMenu from './components/top-menu';

import prestashop from 'prestashop';
import EventEmitter from 'events';

import './lib/bootstrap-filestyle.min';
import './lib/jquery.scrollbox.min';

import './components/block-cart';

// "inherit" EventEmitter
for (var i in EventEmitter.prototype) {
  prestashop[i] = EventEmitter.prototype[i];
}

$(document).ready(() => {
  let dropDownEl = $('.js-dropdown');
  const form = new Form();
  let topMenuEl = $('.js-top-menu ul[data-depth="0"]');
  let dropDown = new DropDown(dropDownEl);
  let topMenu = new TopMenu(topMenuEl);
  let productMinitature = new ProductMinitature();
  let productSelect  = new ProductSelect();
  dropDown.init();
  form.init();
  topMenu.init();
  productMinitature.init();
  productSelect.init();
});

Webpack真的不是我的强项，而且我已经搜遍了所有内容，但是找不到与此错误有关的任何内容。

非常感谢任何帮助。

Answer 1

一位同事帮我弄清楚了。我需要在babel-loader查询中添加正确的预设：

loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015']
        }
    },

Answer 2

我认为问题在于您在执行升级后没有运行npm install。

SyntaxError：意外的令牌：在npm run build上的字符串（公开？Tether！tether）

2 个答案: