如何从另一个js文件中调用一个js文件?

I have two javascript files baseChart.js and chart.min.js. I don't want to include my chart.min.js into index.html file. I just want to include baseChart.js in my index.html.

我有两个javascript文件baseChart。js和chart.min.js。我不想包括我的图表。js指数。html文件。我只是想要包括baseChart。js的index . html。

`var s = document.createElement("script");
s.setAttribute("src","js/Chart.min.js");
document.head.appendChild(s);

class BaseChart{

    constructor(area, settings) {

        this.area = area;
        this.settings = settings;
    }
    a() {
        new Chart(this.area, this.settings);
        console.log("BaseChart");
    }   
}


class BarChart extends BaseChart {
    constructor(area, settings) {
        super(area, settings);
    }
    /* constructor(ctx) {
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {   
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [65, 59, 80, 81, 56, 55, 40],
                    spanGaps: false,
                },
                {
                    label: "Second",
                    data: [12, 56, 45, 23, 78, 23, 90],
                }
            ]
        };
        var lineChart = new Chart(ctx, {
            type: 'line',
            data: data
        });
    } */
    b() {
        super.a();
    }
}`

Currently, this is the baseChart.js file and when I am trying to run this code, I am getting error "Chart is not defined because I used 'new Chart(this.area, this.settings);' and chart.min.js is not initialized before I call this method.". I want to initialize chart.min.js before this classes and method are initialized. I used chart.js library. So, what should I do?

目前，这是一个基本图表。js文件，当我尝试运行这段代码时，我的错误“图表没有定义，因为我使用了新的图表(这个。区域,this.settings);和chart.min。在我调用这个方法之前，js没有被初始化。我想初始化chart.min。在这个类和方法初始化之前。我用图表。js库。那么，我该怎么做呢?

1 个解决方案

#1

I suggest you install chart.js via npm

我建议你安装图表。js通过npm

npm install chart.js --save

and then import it like that:

然后像这样导入:

// ES6

/ / ES6

import Chart from 'chart.js';

I'm assuming that you're using some kind of bundler like webpack to make code above works. If not you have to include chart.min.js in your index file before baseChart.js

我假设您使用的是某种bundler，比如webpack，以使代码能够正常工作。如果不是，你必须包括chart.min。js在你的索引文件之前。

#1