未捕获的语法错误：无法在节点 js 中的模块外使用导入语句

Question

在 nodejs 中使用 ES6 模块语言时，它给了我一个错误“导入不能在模块之外使用”在 Chrome 浏览器中错误。

我正在尝试使用 Node js express mongoose morgan express-handlebars 和 ES6 构建我的项目

但是当我运行该项目时，它给了我同样的错误

我尝试使用 .babelrc 和 webpack.config.js 但无法解决它。 谁能帮我实现它？

我把我的项目的图片供您参考。

谢谢你

在此处输入图片说明

enter image description here

巴贝尔：

{

"预设": [ ["@babel/env", { "useBuiltIns": "usage", "corejs": "3", "targets": { "browsers": [ "last 5 versions", "ie >= 8"] } }] ] }

webpack.config.js：

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

模块.出口 = {

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" }
      ]
}

};

主要.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();
});

主文件

 <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>

Answer 1

您需要将 import 包含在模块中：试试这个：

<script type="module"> import btn from './helper' </script>

在 main.hbs 文件的每个脚本标签中添加type="module"