19
Tôi đang thử Webpack và đang thử hướng dẫn trong this tutorial, cung cấp hoặc thực hiện một số tùy chỉnh.Lỗi không mong muốn "Lỗi không xác định Loại lỗi: XXX không phải là hàm tạo" lỗi với Babel và ES6
Đây là mã đơn giản, thực sự, nhưng tôi khá bối rối về lỗi này và cảm thấy đây là điều ngớ ngẩn mà tôi đã bỏ lỡ.
tôi xác định hai ES6 lớp, mỗi tương ứng với một mẫu tay lái, và entrypoint ứng dụng của tôi có nghĩa vụ phải thay thế HTML giữ chỗ trong tệp chỉ mục theo nội dung:
Entrypoint:
import './bloj.less'
// If we have a link, render the Button component on it
if (document.querySelectorAll('a').length) {
require.ensure([],() => {
const Button = require('./Components/Button.js');
const button = new Button('9gag.com');
button.render('a');
}, 'button');
}
// If we have a title, render the Header component on it
if (document.querySelectorAll('h1').length) {
require.ensure([],() => {
const Header = require('./Components/Header.js');
new Header().render('h1');
}, 'header');
}
Index:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My title</h1>
<a>Click me</a>
<script src="build/bloj.js"></script>
</body>
</html>
Button:
import $ from 'jquery';
import './Button.less';
export default class Button {
constructor(link) {
this.link = link;
}
onClick(event) {
event.preventDefault();
alert(this.link);
}
render(node) {
const text = $(node).text();
var compiled = require('./Button.hbs');
// Render our button
$(node).html(
compiled({"text": text, "link": this.link})
);
// Attach our listeners
$('.button').click(this.onClick.bind(this));
}
}
Tiêu đề:
import $ from 'jquery';
import './Header.less';
export default class Header {
render(node) {
const text = $(node).text();
var compiled = require('./Header.hbs');
// Render the header
$(node).html(
compiled({"text": text})
);
}
}
Đáng buồn thay, nó không hoạt động, và tôi nhận được cả các lỗi khi hiển thị trang:
Uncaught TypeError: Header is not a constructor
Uncaught TypeError: Button is not a constructor
gì có thể Tôi bị mất tích?
Dưới đây là cấu hình webpack của tôi:
var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
var ExtractPlugin = require('extract-text-webpack-plugin');
var production = process.env.NODE_ENV === 'production';
var appName = 'bloj';
var entryPoint = './src/bloj.js';
var outputDir = './build/';
var publicDir = './build/';
// ************************************************************************** //
var plugins = [
//new ExtractPlugin(appName + '.css', {allChunks: true}),
new CleanPlugin(outputDir),
new webpack.optimize.CommonsChunkPlugin({
name: 'main',
children: true,
minChunks: 2
})
];
if (production) {
plugins = plugins.concat([
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 51200 // 50ko
}),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false // Suppress uglification warnings
}
}),
new webpack.DefinePlugin({
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false,
'process.env': {
BABEL_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]);
}
module.exports = {
entry: entryPoint,
output: {
path: outputDir,
filename: appName + '.js',
chunkFilename: '[name].js',
publicPath: publicDir
},
debug: !production,
devtool: production ? false : 'eval',
module: {
loaders: [
{
test: /\.js/,
loader: "babel",
include: path.resolve(__dirname, 'src'),
query: {
presets: ['es2015']
}
},
{
test: /\.less/,
//loader: ExtractPlugin.extract('style', 'css!less')
loader: "style!css!less"
},
{
test: /\.html/,
loader: 'html'
},
{
test: /\.hbs/,
loader: "handlebars-template-loader"
}
]
},
plugins: plugins,
node: {
fs: "empty" // Avoids Handlebars error messages
}
};
Đó là những gì nó đã được. Tôi sẽ chỉnh sửa câu hỏi cho phù hợp. Rất cám ơn :) –
bạn có thể sử dụng 'export var __useDefault = true;' và sau đó bạn không cần '.default' – alfonsob
@alfonsob thay đổi thông số cấu hình giống như cách đi. Nhưng ở đâu? Tôi đang chạy vào một cái gì đó tương tự tại http://stackoverflow.com/questions/39510407/babel-at-fault-for-uncaught-typeerror-in-es2015-code –