Пытаясь обслуживать мой код локально с помощью сгенерированного экспресс-сервера, я столкнулся с известной проблемой, что node.js не распознает операторы импорта / экспорта es6.
Чтобы решить эту проблему, [я решил попробоватьсвязывание моего приложения с помощью веб-пакета.] [1]
У меня сейчас проблема с загрузкой пакета веб-пакета из моего представления .ejs.
Сначала я использовал путь вывода по умолчанию './dist', но при загрузке моей страницы получил 404 ошибки.
При устранении неполадок я решил, что пакет похож на любой другой статический файл ипоэтому я решил переместить выходной каталог в статическую папку, указанную на странице app.js точки входа моего проекта.
Из app.js
app.use(express.static(path.join(__dirname, 'public')));
Из webpack.config.js
"output": {
"path": path.resolve(__dirname, "./public/javascripts"),
"filename": "bundle.js"
},
Похоже, что я успешно выполнил комплект, однако теперь при загрузке приложения я получаю другую ошибку в браузере:
external_"net":1 Uncaught ReferenceError: net is not defined
at eval (external_"net":1)
at Object.net (bundle.js:3539)
at __webpack_require__ (bundle.js:20)
at eval (request.js:18)
at Object../node_modules/express/lib/request.js (bundle.js:1450)
at __webpack_require__ (bundle.js:20)
at eval (express.js:21)
at Object../node_modules/express/lib/express.js (bundle.js:1414)
at __webpack_require__ (bundle.js:20)
at eval (index.js:11)
Я рассматриваю утилизациюполностью упаковать мою первоначальную проблему с тем, чтобы node.js распознал операторы импорта / экспорта другим способом, но я подумал, что мне следует, по крайней мере, сначала сделать глубокое погружение.
Пожалуйста, дайте мне знать, еслиЯ опускаю все, что сделало бы мой вопрос более понятным и более доступным.
Вот соответствующий код:
view (index.ejs):
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script type="text/javascript" src="./javascripts/bundle.js"></script>
<script type="text/javascript" src="./javascripts/map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCx0LvEwPUgGhpLjCErr24dOnk-VWjo83g&callback=initMap">
</script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
точка входа приложения (app.js):
let createError = require('http-errors');
let express = require('express');
let path = require('path');
let cookieParser = require('cookie-parser');
let logger = require('morgan');
const port = process.env.PORT || 4000;
let indexRouter = require('./routes/index');
let usersRouter = require('./routes/users');
let app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
файл конфигурации веб-пакета (webpack.config.js):
const path = require('path');
module.exports = {
"entry": "./app.js",
"output": {
"path": path.resolve(__dirname, "./public/javascripts"),
"filename": "bundle.js"
},
node: {
fs: 'empty'
},
mode:"development",
externals: ['net'],
"module": {
"rules": [
{
"test": /\.js$/,
"exclude": /node_modules/,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"env"
]
}
}
},
{
"test": /\.css$/,
"use": [
"style-loader",
"css-loader"
]
}
]
}
}
Я создаю свой пакет веб-пакета с помощью следующей команды втерминал: «npx webpack --display-error-details --config webpack.config.js»
[1]: /12068082/uncaught-syntaxerror-neozhidannyi-token-v-operatore-importa