javascript - "Unexpected token import" Angular 2外部模块

Question

我正在使用ngx-magicsearch我的项目中的模块。但是，我收到以下错误:未捕获的语法错误:意外的 token 导入。我使用的版本是 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 .