“意外的令牌导入”角度 2 外部模块

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。