npm安装jquery指定版本 npm安装模块

转载

deanyuancn 2023-11-08 22:48:58

文章标签 npm安装jquery指定版本 java python vue javascript 文章分类 jQuery 前端开发

npm 本地安装模块使用

在版本0.6.0中，Meteor引入了NPM支持。但是完整的NPM支持仅适用于流星包。流星应用程序只能加载流星使用的核心NPM模块。这意味着，如果您需要使用Redis，github或winston等NPM模块，那么您就不走运了。但这不是不可能的。

不过，最近，我想出了一种将NPM与Meteor结合使用的更聪明的方法。它打包成一个智能软件包，非常易于使用。

对于本教程，我将指导您使用github NPM模块创建Github Issue Search应用程序。我将逐步介绍如何构建它。但是我想你对流星和陨石有很好的理解。

您可以在http://gh-search.meteor.com上看到实时应用程序，并且代码托管在github上。

创建应用

让我们创建我们的应用程序。

mrt create gh-issue-search
cd gh-issue-search
mrt add bootstrap

我们不需要Meteor自动创建的文件，因此请确保删除以下文件。

gh-issue-search.css
gh-issue-search.html
gh-issue-search.js

让我们添加NPM支持

对于本教程，我们将使用github NPM模块，并将其添加如下所示。

从大气层安装npm智能软件包。

mrt add npm

在项目根目录上创建packages.json文件，并添加以下内容。

{
  "github": "0.1.10"
}

packages.json是我们定义要加载的NPM模块的文件。声明版本时，请确保设置绝对版本号。像0.1.x这样的东西在Meteor中不起作用。

编码流星客户端

创建一个名为client的文件夹，并添加以下HTML和CSS文件。我们不太担心这些文件，因为我们的重点是使用NPM模块。

文件：client / home.html

<head>
  <title>github-search</title>
</head>

<body>
  {{> home}}
</body>

<template name="home">
  <div class='container'>
    <h1>Github Issue Search</h1><br>
    <input type="text" id='user' placeholder="Enter User Name" value="meteor">
    <input type="text" id='repo' placeholder="Enter Repo Name" value="meteor">
    <br>
    <input type='text' id='keyword' placeholder="Enter Search Keyword"><br>
    <button id='search' class='btn btn-info'>Search Now</button>
    <hr/>
    {{> results}}
  </div>
</template>

<template name='results'>
  {{#with error}}
    <div class='alert'>
      {{reason}}
    </div>
  {{/with}}

  {{#each results}}
    <div class='result'>
      <a href='{{html_url}}' target='_blank'>{{title}}</a>
    </div>
  {{/each}}
</template>

文件：client / main.css

h1 {
  margin-top: 30px;
}

.result {
  padding: 10px 0px 10px 10px;
  margin: 5px 0px 5px 0px;
  border-left: 5px solid rgb(200, 200, 200);
  font-size: 16px;
}

文件：client / helpers.js

Template.results.helpers({
  "results": function() {
    return Session.get('results') || [];
  },

  "error": function() {
    return Session.get('error');
  }
});

搜索结果和错误将通过会话变量在模板中呈现。我们要做的就是设置会话变量，然后相应地更改UI。

实施搜索

这就是我们要实现搜索的方式。

我们正在将搜索作为流星方法实施。
Npm github模块将用于进行实际搜索。
来自客户端的搜索请求详细信息（用户，存储库，搜索关键字）将通过Meteor.call发送到Meteor方法
流星方法的结果（或错误）将在Meteor.call捕获，并将其设置为正确的会话变量。

监听按钮单击事件

我们将监听按钮的click事件，并将文本字段值发送到名为search的方法。

文件：/client/events.js

Template.home.events({
  "click #search": function() {
    Session.set('error', null);
    Session.set('results', null);

    var user = $('#user').val();
    var repo = $('#repo').val();
    var keyword = $('#keyword').val();

    $('#search').html('Searching...');
    Meteor.call('search', user, repo, keyword, function(err, results) {
      console.log(results);
      $('#search').html('Search Now');
      if(err) {
        Session.set('error', err);
      } else {
        Session.set('results', results.issues);
      }
    });
  }
});

使用npm模块

现在是时候在服务器中实现我们的方法了。让我们在项目根目录上创建一个名为server的文件夹，并添加如下所示的方法。

文件：server / methods.js

### CodeBlock: 1
Meteor.methods({
  "search": function(user, repo, keyword) {
    ### CodeBlock: 2
  }
});

标记为CodeBlock: x将被以下代码替换。

首先，让我们加载我们的NPM模块。通常，加载NPM模块是Npm.require()的工作。但是，为了加载packages.json定义的模块，您需要改用Meteor.require() 。

让我们在CodeBlock: 1加载Github模块CodeBlock: 1

var Github = Meteor.require('github');
var github = new Github({version: "3.0.0"});

让我们用github npm模块搜索

等一下 NPM模块异步工作，但Meteor方法同步工作。他们在一起玩的不好。

<source type="image/webp"><source><img src="https://s2.51cto.com/images/blog/202309/21181149_650c16e5588cf2437.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">

但是， npm智能软件包引入了另一个有用的方法Meteor.sync ，该方法可以解决此问题。让我们看看它是如何工作的。

此代码将添加到CodeBlock: 2 。

//this is the search request object (which is accept by our github npm module)
var searchRequest = {
  user: user,
  repo: repo,
  keyword: keyword,
  state: 'open'
};

//execution pause here until done() callback is called.
var repos = Meteor.sync(function(done) {
  github.search.issues(searchRequest, function(err, searchResults) {
    done(err, searchResults);
  });
});

if(repos.error) {
  throw new Meteor.Error(401, repos.error.message);
} else {
  return repos.result;
}

Meteor.sync()将暂停执行流星方法，直到触发done()回调为止。因此，现在我们可以安全地在Meteor.sync执行任何异步任务。

获得结果（或错误）后，我们可以通过调用done回调来恢复执行。

done()接受第一个参数作为错误对象，第二个参数作为结果。然后将这些值作为Meteor.sync()的返回值发送到Meteor方法。

返回值被封装到一个对象中，如下所示。

{
  error: {error: "object"},
  result: "resultValue"
}

该代码的另一部分不言自明。

这是我们最终代码的外观。

var Github = Meteor.require('github');
var github = new Github({version: "3.0.0"});

Meteor.methods({
  "search": function(user, repo, keyword) {
    var searchRequest = {
      user: user,
      repo: repo,
      keyword: keyword,
      state: 'open'
    };

    //execution pause here until done() callback is called.
    var repos = Meteor.sync(function(done) {
      github.search.issues(searchRequest, function(err, searchResults) {
        done(err, searchResults);
      });
    });

    if(repos.error) {
      throw new Meteor.Error(401, repos.error.message);
    } else {
      return repos.result;
    }
  }
});