Webpack Lỗi tải Babel - Uncaught SyntaxError: Nhập mã thông báo không mong muốn

Question

Tôi mới sử dụng Webpack và gặp sự cố sau this tutorial.

Có vẻ như webpack.config.js không thiết lập một cách chính xác babel-loader nhưng tôi không sure.In console Tôi thấy các lỗi sau:

bundle.js:49 Uncaught SyntaxError: Unexpected token import 

nào đề cập đến dòng import sortBy from 'lodash/collection/sortBy'; của tôi index.js. Vì vậy, tôi cho rằng đó là một vấn đề babel transpiling (không cho phép cú pháp import của ES6?)

Dưới đây là hoàn toàn file 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); 
    }); 

Và webpack.config.js trông như thế này:

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

tôi đã tìm kiếm thông qua các câu hỏi khác có vẻ như chúng liên quan đến vấn đề here và here cũng như googling xung quanh nhưng không tìm thấy một giải pháp hoặc lý do tại sao tôi gett nhập lỗi. Có lẽ hướng dẫn đã lỗi thời. Mọi hướng dẫn cách khắc phục sự cố này sẽ được nhiều người đánh giá cao!

CẬP NHẬT

Các lỗi babel tải cụ thể đã được giải quyết bằng cách làm theo các bước được nêu trong câu trả lời dưới đây gửi bởi Alexandre Thebaldi.

Tuy nhiên, đã xảy ra lỗi mới - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

Nếu bạn đang làm việc thông qua this tutorial và gặp phải lỗi này, nó rất có thể gây ra bởi một con đường không chính xác trong index.js, đặc biệt là thực tế là các thư mục lodash/collections dường như không còn tồn tại nữa. Tôi đã giải quyết được lỗi thứ hai này bằng cách thay đổi đường dẫn đến lodash/sortBy.

LƯU Ý

Hãy chắc chắn để kiểm tra đầu tiên mà lodash được cài đặt trong node_modules và đường dẫn là đúng thủ công trước khi thay đổi nó.

Answer 1

Trước tiên, hãy chắc chắn rằng bạn đã cài đặt babel lõi và bộ nạp bằng cách sử dụng:

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

Vì vậy, các bộ nạp đúng là babel-loader và không babel. Các cấu hình nên là:

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

---

Trên thực tế bạn cần phải nói cho babel để chuyển mã của bạn.

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset. You can install it with.

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

Sau khi cài sẵn trong máy tính bạn phải kích hoạt nó.

Create a .babelrc config in your project root and enable some plugins.

Assuming you have installed the ES2015 Preset, in order to enable it you have to define it in your .babelrc file, like this:

{ 
    "presets": ["es2015"] 
} 

Chi tiết trong Babel Setup trang.

Answer 2

Mikeym

Đây là vấn đề với bộ tải của babel và ES6.

Bạn có thể thay đổi webpack.config.js của bạn như thế này:

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