Question

我是一个项目，该项目有一个“bootstrap”拥有，我想将它导入我的渲染。

我使用脚本创建了一个存档HTML：

<html>
    <head>
        <script> //1.www.s81c.com/common/v18/css/www.css</script>
        <script> //1.www.s81c.com/common/stats/ida_stats.js</script>
        <script> //1.www.s81c.com/common/v18/js/www.js</script>
    </head>
</html>

并导入我的App.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
        </header>
          To get started, edit <code>src/App.js</code> and save to reload.
      </div>
    );
  }
}

export default App;

但是给出了错误：

> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
|     <head>
|         <script> //1.www.s81c.com/common/v18/css/www.css</script>

恢复我想导入我在App.js

中使用的脚本

Answer 1

我认为.css文件的标记应为<link>。

导入外部脚本有多种方法。一种方法是将这些脚本移动到<head>的{{1}}。

public/index.html

加载页面时将下载这些脚本，您可以访问/// public/index.html /// <html> <head> <script src="//1.www.s81c.com/common/stats/ida_stats.js"></script> <link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet"> <script src="//1.www.s81c.com/common/v18/js/www.js"></script> /// rest of public/index.html ///对象上这些脚本中的变量。从window链接到这些后，重新启动您的React应用程序，然后使用F12或Command-Option-i打开控制台并在控制台中键入public/index.html。在那里，您将看到React应用程序中提供的所有全局功能，包括window，window.IBMCore等

Answer 2

你试过这个吗？

<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>

并且对于以下内容，您可以尝试常规<link />而不是<script>

Answer 3

在index.html路径中导入的内容为public.index.html。因为你的应用程序放在同一个html页面的div之一。

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

阅读webpack如何工作。

https://webpack.js.org/configuration/externals/

否则其他方式是保存文件并导入 App.js

import './App.scss';

如何为我的项目导入脚本？ ReactJS

3 个答案: