个性化阅读
专注于IT技术分析

webpack和babel问题:bundle.js Uncaught SyntaxError Unexpected token import和Module not found Error Cannot resolve module

使用webpack和babel构建新项目,发现报错如下:

bundle.js:49 Uncaught SyntaxError: Unexpected token import

后来网上查找了,改了,还是报错,如下:

Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

下面是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的配置文件如下:

module.exports = {
    entry: './src/index.js',
    output: {
        path: './public/',        
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './public/'
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel'}
        ]
    }
} 

解决办法

首先,要确保你已经安装了babel的核心包和加载器loader,使用如下命令:

$ npm install --save-dev babel-loader babel-core

确保正确的loader是babel-loader而不是babel,配置应该是下面这样:

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

一般来说,你需要告诉babel去转换你的代码。6.x之前,babel默认启用转换,但是6.x却不是,你需要明确设置babel转换代码,最简单的方式是使用一个预设preset,例如ES2015 preset,可以使用以下命令安装:

npm install babel-preset-es2015 --save-dev

安装preset完成后需要手动启用它,在项目根目录创建一个.babelrc文件用于配置一些插件,如果你已经安装ES2015,你可以在.babelrc文件中启用它,如下:

{
  "presets": ["es2015"]
}
赞(0) 打赏
未经允许不得转载:srcmini » webpack和babel问题:bundle.js Uncaught SyntaxError Unexpected token import和Module not found Error Cannot resolve module
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏