javascript - 从 package.json 到 index.html (jQuery) 的依赖关系

Question

我想知道您实际上是如何为您的脚本使用诸如 jQuery 之类的依赖项的。我尝试在 index.html 中链接它但没有成功。我的测试函数和我稍后将使用的函数都可以与 jQuery 一起使用，但是当我将 js 文件链接到 HTML 的头部时，它就可以工作。html 和 js 文件如何“知道”它们可以使用哪些依赖项？谢谢

/*package.json*/
{
  "name": "principles",
  "version": "1.0.0",
  "description": "This is the life-long project of constantly updating principles for 4 AoL, Intellectual, Physical, Relationships, Spiritual",
  "main": "IntPrin.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "Ronnlidd",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  }
}



/*NEW FILE, IntPrin.js , linked in head of HTML and working with vanilla js*/
  window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}
  
  window.onload = function() {
  $("#toggleAllElms").click(function() {
    $(".toggleAcronym").toggle('slow');
  });
};

function oneElmToggle(elm) {
  const display = elm.nextSibling.style.display;
  if (display === "none" || display === "") {
    elm.nextSibling.style.display = "block";
  } else {
    elm.nextSibling.style.display = "none";
  }
}

* {
    text-align: center;
    height: auto;
    padding: 10px 0;

}

.BOLD {
    font-weight: 800;
}

.UNDERLINED {
    text-decoration: underline;
}

.MARKED {
    background-color: rgba(251, 255, 0, 0.315);
    padding: 2px;
    display: inline;
}

.CURSIVE {
    font-style: italic;
}

.REDTEXT {
    color: red;
}

body {
    min-width: 700px;
}

header {
    width: 100%;
    min-width: 700px;
    height: 80px;
    text-align: center;
    background: linear-gradient(to bottom right, rgb(0, 0, 0), red);
    color: rgb(250,220,255);
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 3px 3px rgb(0,0,0);
}

header h1 {
 margin-top: 23px;   
}

.ChooseMetaPrinciple {
   text-align: center;
   border: 2px solid rgb(255, 0, 0);
   width: 40%;
   margin: 100px auto 0 auto;
}

.container {
    display: flex;
    width: 90%;
    margin: 0 auto 30px auto;
    flex-direction: column; 
    justify-content: space-around;
    align-content: space-around;
}

.grid-item {
    width: auto;
    background: linear-gradient(to top left, rgb(255, 220, 200), rgb(250, 170, 70));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    position: relative;
    top: 20%;
    margin-top: 25px;
    font-size: 2rem;
    font-weight: 700;
}

.Meta-Principle {
    width: 70%;
    background: linear-gradient(to top left, rgb(0,0,0), rgb(0, 10, 70));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    color: white;
    margin: 0 auto 30px auto;
    position: relative;
    top: 20%;
    font-size: 2rem;
    font-weight: 700;
}

.ChooseSubPrinciple { 
    text-align: center;
    border: 2px solid rgb(255, 0, 0);
    width: 40%;
    margin: 20px auto 20px auto;
 }

.flex {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 98%;
    margin: 0px auto 20px auto;
  }

  .flex > h4 {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    width: 25%;
    margin: 0 5px;
    padding: 5px 2px;
  }

  .a, .b, .c, .d, .e, .f {
    font-size: 1.6rem;
    text-align: center;
    background: linear-gradient(to top left, rgb(219, 7, 7), rgb(255, 238, 0));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    width: 86%;
    margin: 20px auto;
  }

  .d {
    margin-top: 200px;
  }

  .p {
    font-size: 1.5rem;
    text-align: center;
    background: linear-gradient(to top left, rgb(255, 0, 221), rgb(4, 0, 255));
    border-radius: 1%;
    box-shadow: 0 7px 7px black;
    width: 70%;
    margin: 25px auto;
    color: aliceblue;
    padding: 10px;
  }

    .p1container {
      border: 1px solid black;
      border-radius: 30%;
      width: 40%;
      margin: 0 auto;
      height: 540px;
      padding: 0 180px;
  }

  #p1 {
    margin-top: 15px;
    width: 97%;
    border-right: 1px solid grey;
  }

  #badEcon {
    margin-top: -35px;
    height: 100px;     
}

 #p11, #p12 {
     font-size: 1.416rem;
  }

  #p11 {
      float: left;
      width: 57%;
      height: 100%;
      background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
      border-right: 2px solid black;
  }

  #p12 {
      width: 30%;
      height: 100%;
      float: right;
      background: linear-gradient(to top right, rgb(0, 0, 0), rgb(133, 133, 133));
      border-right: 1px solid grey;
  }   

  #p121 {
    width: 30%;
    float: right;
    border-right: 1px solid grey;
    font-size: .8rem;
    margin: 0 0 0 100%;
    background: linear-gradient(to top right, rgb(0, 255, 179), rgb(0, 47, 255));
  }

  #p1211 {
    width: 30%;
    float: right;
    background: linear-gradient(to top right, rgb(255, 0, 0), rgb(158, 0, 0));
    font-size: .8rem;
    border-right: 1px solid grey;
  }

  #p2, #p3, #p4 {
      width: 56%;
  }

  .p5container {
    border: 1px solid black;
    border-radius: 30%;
    width: 40%;
    margin: 0 auto;
    height: 280px;
    padding: 20px 80px 20px 80px;
}

 #p5 {
      width: 500px;
  }

  .flex5 {
    width: 105%;
    margin: -30px auto 0 auto;
  }

  #p51, #p52, #p53 {
      width: 28%;
      background: linear-gradient(to top left, rgb(0, 0, 0), rgb(97, 97, 97));
      color: white;
      font-size: 1rem;
      height: 100px;
     }

  #p6Acronyms {
      width: 30%;
      border: 1px solid blue;
      margin: 0 auto;
      padding: 10px;
  }

  #p6Acronyms button {
    width: 100%;
    border: 1px solid blue;
    margin: 0 auto;
    padding: 20px;
    background: rgb(0, 152, 223); 
    color: azure;
}

#p6Acronyms button:hover {
    background: rgb(0, 47, 255);
    color: antiquewhite;
}

#p6Acronyms  p {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML5><html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="IntPrin.css">
<script type="text/javascript" src="IntPrin.js"></script>
</head>

<body>

<header>
<h1>Intellectual Principles</h1>
</header>
<h2 class="ChooseMetaPrinciple">Choose Meta-Principle</h2>
<div class="container">
    <div class="grid-item">
        <a>Boost your odds of success through de-centralized principle-guided decision-making.</a>
    </div>
                
    <div class="grid-item">
        <a>Learn, Grow, Evolve. Be Anti-Fragile.</a>
    </div>
            
    <div class="grid-item">
        <a>Apply principles in complex sub-systems of reality.</h2>
    </div>
</div>

    <div class="Meta-Principle">Boost your odds of success through de-centralized principle-guided decision-making.</div>

    <h2 class="ChooseSubPrinciple">Choose Sub-Principle</h2>
    <div class="flex">
        <h4>Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.</h4>
        <h4><a>Find your meaning/Why</a> <i>What do you want reality to be like?</i></h4>
        <h4>Write down principles for making decisions in future realities.</h4>
        <h4>Turn principles into algorithms.</h4>
        <h4>Incrementally RUD principles for 4 AoL.</h4>
        <h4>Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h4>
    </div>
 
    <a><h4 class="a">Find out what reality looks like through <a>The Scientific Method</a> & phenomenology of consciousness.</h4></a>
    <a><h4 class="b"><a>Find your meaning/Why</a> <i>What do you want reality to be like?</i></h4></a>
    <a><h4 class="c">Write down principles for making decisions in future realities.</h4></a>
   
 <div class="p1container">
    <div class="p" id="p1">Meta-principles make sub-principles obsolete.</div>
         <div id="badEcon">
    <div class="p" id="p11">Principles serve you, you don't serve them. //Plan unrigidly & keep an open mind.</div>
    <div class="p" id="p12">Delay decisions AMA(subj.)P.</div><br>
        </div>
    <div class="p" id="p121">Use situational awareness in combination with more general principles as basis for decisions. //Instead of seeking order and getting pseudoorder when planning.</div>
    <div class="p" id="p1211">If subjective brain thinks, at a deliberate level in a state of happy intelligent consiousness, that a decision should be made, that decision can be made even though it violates some meta-principle.</div>
</div>

 <div class="p" id="p2">If principle is subj. practically re-usable, Then write it down. Else embrace the subj. experience of principle.</div>
 <div class="p" id="p3">Summarize books & experiences by principles and then transfer them to their place in the principle-hierarchy.</div>
 <div class="p" id="p4">If subj. practical, Then write down what will falsify and make obsolete, the principle that you’re using/pondering. //Else keep it in top of mind.</div>

 <div class="p5container">
 <div class="p" id="p5">Use markers, colors and distinguishers. //To communicate with your future self.</div>
<div class="flex flex5">
    <div class="p" id="p51"><span class="BOLD">Bold, </span><span class="UNDERLINED">underlined</span> or <span class="MARKED">marked</span> means part of principle is important.</div>
    <div class="p" id="p52"><span class="CURSIVE">Cursive</span> means referencing something which has a mental representation.</div>
    <div class="p" id="p53"><span class="REDTEXT">Red text</span> means it is not ordered enough for level of principle in which it currently is located, //Work has to be done in area.</div>
 </div>
</div>
 
 <div class="p" id="p6">Use acronyms to increase efficiency of principle-CRUD.</div>
<div id="p6Acronyms">
	<button onclick="oneElmToggle(this)">RWE</button><p class="toggleAcronym">Real World Example</p> 
	<button onclick="oneElmToggle(this)">CRUD</button><p class="toggleAcronym">Create, Read, Update, Delete</p>
    <button onclick="oneElmToggle(this)">CNS</button><p class="toggleAcronym">Central Nervous System</p>
    <button onclick="oneElmToggle(this)">MPS</button><p class="toggleAcronym">Muscle Protein Synthesis</p>
    <button onclick="oneElmToggle(this)">I.e.</button><p class="toggleAcronym">In essence</p>
    <button onclick="oneElmToggle(this)">ALAP</button><p class="toggleAcronym">As Long As Possible</p>
    <button onclick="oneElmToggle(this)">AMAP</button><p class="toggleAcronym">As Much As Possible</p>
    <button onclick="oneElmToggle(this)">CoC</button><p class="toggleAcronym">Contents of Consciousness</p>
    <button onclick="oneElmToggle(this)">RR(P)(F)-R</button><p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
    <button onclick="oneElmToggle(this)">AoL</button><p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
    <button onclick="oneElmToggle(this)">MBS</button><p class="toggleAcronym">Mind Body & Spirit</p> 
    <button onclick="oneElmToggle(this)">QoC</button><p class="toggleAcronym">Quality of Consciousness</p>
    <button onclick="oneElmToggle(this)">PFC</button><p class="toggleAcronym">Pre-Frontal Cortex</p>
    <button onclick="oneElmToggle(this)">SRV</button><p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>
    <button onclick="oneElmToggle(this)">P/T-R</button><p class="toggleAcronym">Practice/Theory-Ratio</p>
    <button id="toggleAllElms"><h2>Toggle All</h2></button><p class="toggleAcronym">This button toggles all acronym descriptions to Show/Hide</p>
</div>

    <a><h4 class="d">Turn principles into algorithms.</h4></a>
    <a><h4 class="e">Incrementally RUD principles for 4 AoL.</h4></a>
    <a><h4 class="f">Practice. <i>Doing what's subj. right, using skill through principle-guided decision-making in complex systems.</i></h4></a>

    <!-- <div class="Meta-Principle">
        <h2>Learn, Grow, Evolve. Be Anti-Fragile.</h2>
    </div>
            
    <div class="Meta-Principle">
        <h2>Apply principles in complex sub-systems of reality.</h2>
    </div> -->
<footer>

</footer>
</body>
</html>

标签： javascriptjqueryhtml