我对Webpack不太了解,按照这个教程进行时遇到了问题。
看起来webpack.config.js没有正确设置babel-loader
,但我不确定。在控制台中我看到以下错误:
bundle.js:49 Uncaught SyntaxError: Unexpected token import
这指的是我的index.js
中的import sortBy from 'lodash/collection/sortBy';
行。因此,我认为这是一个Babel转译问题(不允许ES6的import
语法?)
以下是完整的index.js
文件
import sortBy from 'lodash/collection/sortBy';
import {users} from './users';
import {User} from './User';
sortBy(users, 'name')
.map(user => {
return new User(user.name, user.age);
})
.forEach(user => {
console.log(user.display);
});
而 webpack.config.js
看起来像这样:
module.exports = {
entry: './src/index.js',
output: {
path: './public/',
filename: 'bundle.js'
},
devServer: {
contentBase: './public/'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel'}
]
}
}
我已经查看了其他类似于这里和这里的问题,并在 Google 上搜索,但尚未找到解决方法或造成错误的原因。也许该教程已过时。非常感谢任何有关如何解决此问题的指导!
更新
按照Alexandre Thebaldi所发布的答案中概述的步骤解决了特定的babel加载错误。
然而,出现了一个新的错误 - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'
。
如果您正在通过此教程进行工作,并遇到此错误,则最可能是由于index.js
中的路径不正确,具体来说是lodash/collections
目录似乎不再存在。我通过简单地将路径更改为lodash/sortBy
成功解决了第二个错误。
注意
在更改路径之前,请务必先手动检查node_modules
中是否安装了lodash
并且路径正确。
Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'
。我检查了 lodash 目录,发现没有collection
子目录。所以我将路径更改为lodash/sortBy'
,然后它就可以工作了。很遗憾教程中省略了 babel 配置的重要部分。 - mikeym