我是React的新手，我正试图在我的项目中包含一个库javascript文件。我在index.html.中添加了脚本
...
<body>
...
...
<script src="../src/assets/js/scripts-init/demo.js"></script>
</body>
</html>
当我在Firefox中打开它时，我可以在控制台日志中看到警告和错误。警告：
The script from “http://localhost:3000/src/assets/js/scripts-init/demo.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
错误：
Uncaught SyntaxError: expected expression, got '<' demo.js
在React项目中添加.js脚本的正确方法是什么？
谢谢。
包括demo.js
// Demo Theme Options
$(function () {
$('.btn-open-options').click(function () {
$('.ui-theme-settings').toggleClass('settings-open');
});
$('.close-sidebar-btn').click(function () {
var classToSwitch = $(this).attr('data-class');
var containerElement = '.app-container';
$(containerElement).toggleClass(classToSwitch);
var closeBtn = $(this);
if (closeBtn.hasClass('is-active')) {
closeBtn.removeClass('is-active');
} else {
closeBtn.addClass('is-active');
}
});
$('.switch-container-class').on('click', function () {
var classToSwitch = $(this).attr('data-class');
var containerElement = '.app-container';
$(containerElement).toggleClass(classToSwitch);
$(this).parent().find('.switch-container-class').removeClass('active');
$(this).addClass('active');
});
$('.switch-theme-class').on('click', function () {
var classToSwitch = $(this).attr('data-class');
var containerElement = '.app-container';
if (classToSwitch == 'app-theme-white') {
$(containerElement).removeClass('app-theme-gray');
$(containerElement).addClass(classToSwitch);
}
if (classToSwitch == 'app-theme-gray') {
$(containerElement).removeClass('app-theme-white');
$(containerElement).addClass(classToSwitch);
}
if (classToSwitch == 'body-tabs-line') {
$(containerElement).removeClass('body-tabs-shadow');
$(containerElement).addClass(classToSwitch);
}
if (classToSwitch == 'body-tabs-shadow') {
$(containerElement).removeClass('body-tabs-line');
$(containerElement).addClass(classToSwitch);
}
$(this).parent().find('.switch-theme-class').removeClass('active');
$(this).addClass('active');
});
$('.switch-header-cs-class').on('click', function () {
var classToSwitch = $(this).attr('data-class');
var containerElement = '.app-header';
$('.switch-header-cs-class').removeClass('active');
$(this).addClass('active');
$(containerElement).attr('class', 'app-header');
$(containerElement).addClass('header-shadow ' + classToSwitch);
});
$('.switch-sidebar-cs-class').on('click', function () {
var classToSwitch = $(this).attr('data-class');
var containerElement = '.app-sidebar';
$('.switch-sidebar-cs-class').removeClass('active');
$(this).addClass('active');
$(containerElement).attr('class', 'app-sidebar');
$(containerElement).addClass('sidebar-shadow ' + classToSwitch);
});
});
如果您使用静态文件，您应该将它们添加到react项目中的公用文件夹中，例如：
YOUR_PROJECT_FOLDER
|_public
|_index.html
|_static
|_scripts-init
|_demo.js
然后用相对路径引用它，比如：
<script src="/static/scripts-init/demo.js"></script>
这是因为代码由webpack(或默认的transpiler(进行transpile，并在不存在"src"文件夹的情况下生成一个开发构建。