在 nodejs 中使用 ES6 模块语言时出现错误 Chrome 浏览器中的“IMORTS 不能在模块外部使用”错误。
我正在尝试使用 Node js express mongoose morgan express-handlebars 和 ES6 构建我的项目
但是当我运行这个项目时，它给了我一个相同的错误
我尝试使用 .babelrc 和 webpack.config.js 但无法解决它。 谁能帮我实现它？
我正在放我的项目图片供您引用。
谢谢
在此输入图片描述
Babelrc:
{
“预设”:[ ["@babel/环境", { "useBuiltIns": "用法", “corejs”:“3”， “目标”:{ “浏览器”:[ “最后 5 个版本”， “即 >= 8” ] } }] ]
webpack.config.js:
const path = require('路径'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
filename: 'index.html',
template: 'main.hbs'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
],
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
}
};
main.js:
enter code here
import Search from './models/search';
import Movie from './models/Movie'
import User from './models/user'
import * as searchView from './views/searchView'
import * as movieView from './views/movieView'
import { elements , renderLoader, clearLoader } from './views/base'
const state = {};
const controlSearch = async () => {
// const query = searchView.getInput();
const query = 'avengers';
if (query) {
searchView.clearInput();
searchView.clearResult();
state.search = new Search(query);
state.user = new User();
searchView.clearInput();
searchView.clearResult();
renderLoader(elements.searchRes);
await state.search.getResult();
await state.user.userSignUp();
clearLoader();
console.log(state.search.result);
searchView.renderResults(state.search.result);
}
};
elements.searchForm.addEventListener('submit', e => {
e.preventDefault();
controlSearch();
});
main.hbs
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie Recherer</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/all.min.css"/>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/home.css" />
</head>
<body>
<div class="container">
<div class="row">
{{{body}}}
</div>
</div>
<script src="/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script language="javascript" src="/js/main.js"></script>
<script language="javascript" src="/js/models/Movie.js"></script>
<script language="javascript" src="/js/models/search.js"></script>
<script language="javascript" src="/js/views/base.js"></script>
<script language="javascript" src="/js/views/movieView.js"></script>
<script language="javascript" src="/js/views/searchView.js"></script>
</body>
</html>
最佳答案
您需要将导入包含在一个模块中: 试试这个:
<script type="module"> import btn from './helper' </script>
在 main.hbs 文件的每个脚本标签中添加 type="module"
关于javascript - 未捕获的语法错误 : Cannot use import statement outside a module in node js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63661519/