导入库的问题

我最近遇到了一个interact.js,我想在我的一个项目中使用一个库,但是我不能让它工作。

我已经通过npm安装它

npm install interactjs --save 

它显示在我的package.json依赖关系为

  "dependencies": { "angular": "^1.6.4", "angular-ui-router": "^0.4.2", "interactjs": "^1.2.9" } 

而且我还在main.js中导入了其他库和模块

 import 'interactjs'; 

该项目是在angularjs中,我已经在我的控制器中的一个函数内使用一些interact.js语法,但我得到以下错误:

 app.js:57837 Uncaught Error: Module parse failed: path\controller.js Unexpected token (207:48) You may need an appropriate loader to handle this file type. | drag() { | let drag = document.querySelector('.draggable'); | interact(drag).draggable({ inertia: true; }) | } | at Object.__webpack_require__.constructor.options.count (app.js:57837) at __webpack_require__ (app.js:658) at fn (app.js:86) at Object.__webpack_exports__.a (app.js:57778) at __webpack_require__ (app.js:658) at fn (app.js:86) at Object.<anonymous> (app.js:57896) at __webpack_require__ (app.js:658) at fn (app.js:86) at Object.module.exports (app.js:5219) 

我猜这跟webpack有关,而不是库本身?

编辑:webpack.config.js

 const path = require('path'); const webpack = require('webpack'); /** * Plugins */ const HtmlWebpackPlugin = require('html-webpack-plugin'); /** * Env. vars */ const port = process.env.PORT || 3000; const hostname = process.env.HOSTNAME || 'localhost'; const host = 'http://' + hostname + ':' + port; const assetHost = process.env.ASSET_HOST || host + '/'; const paths = { source: 'src', dist: 'public' }; module.exports = { entry: { app: [ path.resolve('src/main.js'), 'webpack-dev-server/client?' + host, 'webpack/hot/only-dev-server' ] }, output: { path: path.join(process.cwd(), 'public'), filename: '[name].js', chunkFilename: '[chunkhash].[name].js' }, resolveLoader: { modules: ['node_modules'] }, resolve: { modules: [ 'devtools', 'src', 'node_modules' ], extensions: ['.ts', '.js', '.json', '.scss', '.css', '.html', '.jpg', '.png'], alias: { 'game': path.resolve('src/modules/game') } }, node: { global: true, process: true, console: true, fs: 'empty' }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve('src/index.ejs'), inject: 'head' }), new webpack.HotModuleReplacementPlugin() ], devServer: { inline: true, port: port, publicPath: assetHost, // Make sure publicPath always starts and ends with a forward slash. contentBase: [ path.join(process.cwd(), paths.source), path.join(process.cwd(), paths.dist) ], clientLogLevel: 'none', noInfo: true, historyApiFallback: { disableDotRule: true } }, module: { rules: [ { test: /\.html$/, exclude: /node_modules/, use: [ { loader: 'html-loader' } ] }, { test: /\.(jpe?g|gif|png|woff|woff2|eot|ttf|svg)$/, use: [ { loader: 'file-loader' } ] }, { test: /\.scss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader', options: { includePaths: [ // path.resolve('node_modules/xbem/src/'), // path.resolve('src/themes/' + config.theme) ] } } ] } ] } }