0

我正在为我的项目使用 ES6、typeahead 和 webpack。

下面是我的 webpack 配置文件：

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
var webpack = require("webpack");
var CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
var extractSCSS = new ExtractTextPlugin('stylesheets/[name].css');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: '.',
    output: {
        path: path.resolve(__dirname, "builds/web"),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js/,
        include: [
            path.resolve(__dirname, "src")
        ]
    }]
},
devtool: 'source-map',
resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    },
    extensions: [".js",".json"]
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'Custom template using Pug',
        template: 'index.pug',
        inject: true,
        excludeAssets: [/bundle.js/]
    }),
    new HtmlWebpackExcludeAssetsPlugin(),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.Tether": 'tether'
    }),
    extractCSS,
    extractSCSS
]
};

在我的 bundle.js 中，我得到了导致问题所需的 typeahead 依赖项。当我注入我的角度模块时，它会抛出错误。

app.js ：（app.js 代码的一部分）

import "typeahead";

export class AppClass {
    constructor() {

        this.module = angular.module("appModule", ['typeahead']);

    }
}

依赖项：

"devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "copy-webpack-plugin": "^4.0.1",
    "html-webpack-exclude-assets-plugin": "0.0.3",
    "ng-sortable": "^1.3.7",
    "pug": "^2.0.0-beta6",
    "webpack": "^2.2.1",
    "webpack-append": "^0.1.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "angular": "1.5.6",
    "angular-messages": "1.5.7",
    "angular-slick-carousel": "^3.1.7",
    "angular-ui-bootstrap": "^0.14.3",
    "angular-ui-mask": "^1.8.7",
    "angular-ui-router": "^0.3.2",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "bluebird": "^3.4.6",
    "bootstrap": "4.0.0-alpha.2",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^2.0.0-rc.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "jquery": "2.2.4",
    "json-loader": "^0.5.4",
    "lodash": "^4.17.0",
    "moment": "^2.17.1",
    "node-sass": "^3.11.2",
    "pug-loader": "^2.3.0",
    "sass-loader": "^4.0.2",
    "slick-carousel": "^1.6.0",
    "style-loader": "^0.13.1",
    "tether": "^1.4.0",
    "url-loader": "^0.5.7",
    "webcomponents-lite": "^0.6.0"
  }

我猜 typeahead.js 是没有导出语法的普通库，我正在尝试导入它无法从中创建模块功能的库。

任何想法？还是有人遇到过同样的问题？

4

0 回答 0