没有npm的反应 - 是否可以导入库/模块?

时间:2017-02-10 17:44:54

标签: javascript reactjs chart.js

我在没有npm的情况下使用React(由于服务器端限制)。在我的<head>标记中,我有以下内容

<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

我的反应代码打包在text/babel脚本标记内并且运行正常。简化示例:

<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
    );    
</script>

我想使用外部模块进行制图。但是,如果我使用https://github.com/reactjs/react-chartjs(只需下载并在本地提供),请加入

<script type="text/javascript" src="/js/react-chartjs/chart.js"></script>

<script type="text/babel" src="/js/react-chartjs/chart.js"></script>

抛出错误:

ReferenceError: require is not defined

大概是因为require是一个npm命令。我已经尝试过使用require.js,但是再次抛出错误。同样,如果我从

提供javascript版本的chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js

并在我的text/babel脚本标记内尝试将库包含在任何

// Using CommonJS
var Chart = require('chart.js')
var myChart = new Chart({...})

// ES6
import Chart from 'chart.js'
let myChart = new Chart({...})

// Using requirejs
require(['path/to/Chartjs'], function(Chart){
 var myChart = new Chart({...})
})

它也会引发错误。有没有办法在没有npm的情况下使用react时导入普通的javascript库或反应模块?

1 个答案:

答案 0 :(得分:0)

好的,所以这是一个使用PHP的可怕黑客,但它是我找到的唯一选择。我也没有可用的npm服务器。因此,我使用PHP从多个文件中创建单个大量内容,而不是使用javascript导入或像browserify这样的包管理器,因为它们仍然需要npm,我使用PHP来创建单个大内容:

<script type="text/babel">

<?php

include 'BDRMLElement.js';

?>

...

class App extends React.Component {
 ...
 render() {
   return (
        <div>
          <BDRMLElement />
...

</script>