Question

我在项目中使用ngx-magicsearch模块。但是，我收到以下错误：未捕获的SyntaxError：意外的令牌导入。我使用的是Angular 4.2.5版本，Webpack版本1.15.0和Typescript 2.3.4 这是我的Webpack文件：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'app': './app/app.module.ts',
        'vendor': './app/vendor/vendor.ts'
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.css', '.html'],
        modulesDirectories: ["node_modules", "assets\\js"]
    },
    output: {
        filename: '[name].bundle.js',
    },
    module: {

        noParse: [/jszip.js$/],

        loaders: [{
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-router-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: './app',
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
            },
            {
                test: /\.css$/,
                include: './app',
                loader: 'raw'
            },
            {
                test: /[\\\/]assets[\\\/]js[\\\/]modernizr\.min\.js$/,
                loader: "imports?this=>window!exports?window.Modernizr"
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            KJUR: "jsrsasign-latest-all-min",
            b64utoutf8: "base64x",
            dateFormat: "dateformat",
            moment: "moment"
        }),
        new ExtractTextPlugin('[name].bundle.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor']
        })
    ],
    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
};

tsconfig.js：

    {
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmitHelpers": false,
        "sourceMap": true,
        "preserveConstEnums": true,
        "alwaysStrict": true

    },
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false,
    "buildOnSave": false
}

错误：

Answer 1

entry point of ngx-magicsearch使用ES模块。您需要与babel一起使用它来使用它。通常这些软件包会发布一个转换后的版本，尽管它们中的许多版本现在也发布了一个带有ES模块的版本，可以通过捆绑支持它们的工具来使用。从webpack 2开始，ES模块支持开箱即用。

强烈建议升级webpack。您必须稍微调整一下配置。有关详细信息，请查看official migration guide。

＆＃34;意外的令牌导入＆＃34;角度2外部模块

1 个答案: