Javascript 将引导添加到index.js

我一直在尝试按照Bootstrap网站上的说明将Bootstrap添加到index.js文件中。我一试，他们的建议就错了。我很确定我遗漏了什么，但我不知道是什么

index.js是：

const express = require('express');
const hbs = require('hbs');
import 'bootstrap';

const app = express();

hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');

app.get('/', (req, res) => res.render('index'));

app.listen(3000, () => {
  console.log('App listening at port 3000!')
});

错误是：

import 'bootstrap';
^^^^^^

SyntaxError: Unexpected token import

My package.json是：

"dependencies": {
    "bootstrap": "^4.0.0",
    "express": "^4.16.2",
    "hbs": "^4.0.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9"
  },

嗯！当我将以下内容添加到index.hbs文件的头部时，似乎引导现在可以正确地呈现导航栏，但我希望通过使用通过node npm安装的引导来实现同样的效果

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

---

如果不使用babel，则无法在nodejs环境中使用导入。您应该使用

require

另外，您正在尝试在

server.js

文件中导入

bootstrap

我相信您希望在

app.js

文件中导入

bootstrap

。您的输入javascript文件。

在您的情况下，我只使用CDN：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

---

如果要使用

导入

关键字，则必须使用babel来传输代码，或者使用

.mjs

文件格式。但这不是代码中的主要问题

您正在尝试将引导导入NodeJs，这没有多大意义。NodeJs是服务器端javascript，bootstrap是用于前端的

您应该在应用程序中使用某种视图引擎来处理前端组件。例如，签出

嵌入式javascript

或

pug

然而，现在人们倾向于使用前端框架。检查常用选项，如React、Vue或Angular。React有一个名为

create React app

的工具，可以让您轻松开始使用

---

最后，如果您能就如何使用引导提供一些见解，我们可能会提供更多帮助。

您使用的是什么版本的node？或者你用什么来传输你的代码？导入是es6功能，因此您的环境可能不支持它$node-v是v8.4.0您不能使用

import

关键字，但可以使用

require

检查此选项是否有任何可用的答案回答了您的问题？：）是的，这就是我最后要做的。如果答案有帮助，请随意接受。：）我不知道你的堆栈看起来是什么样子，但总的来说，问题是你试图在后端环境中使用前端库。是的，我在视图引擎中使用Handlebar（hbs）。而且，我只是使用引导程序将导航栏、页脚和网格组件添加到页面的某些部分。