谈谈前端模块管理

  以前,写个项目用到jQuery时候,会打开网页去jQuery官网下载一份.js文件,然后在项目中引用

<script src="path/to/jquery.js"></script>

  后来,我开始用[Bower]这样的包管理工具。所以这个过程变成了:先打开命令行用bower安装jQuery。

bower install jquery

  在用到jQuery的地方,继续用<script>来引用

<script src="bower_components/jquery/dist/jquery.js"></script>

  现在,我们又有了新的选择,那就是NPM以及Browserify

首先通过命令行 下载jQuery

npm install jQuery

在需要用到jQuery的地方,这么引入

var $ = require("jquery");

  这是使用npm包的一个常用的方法,但是如何把这个jQuery引用到我们浏览器中来呢,是的,通过Browserify。

  正如其名字所体现的动作那样,让原本属于服务器端的Node及npm,在浏览器端也可使用。

  显然,上面的过程还没结束,接下来是Browserify的工作(假定上面那段代码所在的文件叫main.js

browserify main.js -o bundle.

  最后,用<script>引用Browserify生成的bundle.js文件。 

<script src="bundle.js"></script>

  CommonJS风格的模块及依赖管理

  Browserify并不只是一个让你轻松引用JavaScript包的工具。它的关键能力,是JavaScript模块及依赖管理它参照了Node中的模块系统,约定用require()来引入其他模块,用module.exports来引出模块。在我看来,Browserify不同于RequireJS和Sea.js的地方在于,它没有着力去提供一个“运行时”的模块加载器,而是强调进行预编译。预编译会带来一个额外的过程,但对应的,你也不再需要遵循一定规则去加一层包裹。因此,相比较而言,Browserify提供的组织方式更简洁,也更符合CommonJS规范。

时间: 2024-11-06 23:01:58

谈谈前端模块管理的相关文章

前端模块管理器简介

模块化结构已经成为网站开发的主流. 制作网站的主要工作,不再是自己编写各种功能,而是如何将各种不同的模块组合在一起. 浏览器本身并不提供模块管理的机制,为了调用各个模块,有时不得不在网页中,加入一大堆script标签.这样就使得网页体积臃肿,难以维护,还产生大量的HTTP请求,拖慢显示速度,影响用户体验. 为了解决这个问题,前端的模块管理器(package management)应运而生.它可以轻松管理各种JavaScript脚本的依赖关系,自动加载各个模块,使得网页结构清晰合理.不夸张地说,将

React开发和模块管理的主流工具——Webpack

webpack 前端模块管理和打包工具 原址:http://www.infoq.com/cn/articles/react-and-webpack CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用于前端.随着npm成为主流的JavaScript组件发布平台,越来越多的前端项目也依赖于npm上的项目,或者自身就会发布到npm平台.因此,让前端项目更方便的使用npm上的资源成为

[Web 前端] 使用yarn代替npm作为node.js的模块管理器

cp from : https://www.jianshu.com/p/bfe96f89da0e Fast, reliable, and secure dependency management Yarn是Facebook公司出品的用于管理nodejs包的一款软件,开发过nodejs的同学应该知道,我们一般都使用npm作为我们nodejs项目的模块管理器,但npm有一些历史遗留问题,首先,npm安装速度比较慢,而且当项目中模块数量越来越多时,管理这些模块及其依赖的版本是件令人头疼的事,其次npm

我的 React Native 技能树点亮计划 の Javascript 模块管理器 npm

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文由于潜在的商业目的,不开放全文转载许可,谢谢! npm,全称是 node package manager,顾名思义最开始是作为 Node 的包管理器存在的.不过经过不断的发展和壮大,现在的 npm 早就不再局限于 Node 的范畴,已经成为 Javascript 的包管理器,看看下面的 npm 官网首页介绍就知道了: 本系列教程假设你已经按照 React Native 官方入门指南安装好相关的环境(尤其是 Node

扒一扒前端包管理器

好久没有写文章了,前端时间一直瞎忙,最近总算有空闲时间可以好好学习下了,今天和大家分享一下有关前端包管理器的东西,主要把工作中常用的bower与最近一直在研究的browserify.duo以及快过时的component进行了一下介绍与对比,都是干货,希望大家勿喷.啦啦啦,话不多说,开始吧: 一.Bower Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系,其主要作用就是:

nodejs-npm模块管理器

JavaScript 标准参考教程(alpha) 草稿二:Node.js npm模块管理器 GitHub TOP npm模块管理器 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 简介 npm init npm set npm config npm info npm search npm list npm install 基本用法 安装不同版本 避免系统权限 npm update,npm uninstall npm run 参数 scripts脚本命令最佳实践 p

MVC4做网站后台:模块管理1、修改模块信息

网站可能会包含一些模块:像文章.产品.图片.留言等. 栏目模块主要实现功能,启用或禁用模块,模块权限设置,模块上传设置等. 权限设置和上传设置以后专门考虑,先来显示或禁用模块. 1.在顶部导航栏添加管理连接 打开Home/Header.cshtml,在<nav>添加代码 2.添加Module接口 using Ninesky.Models; using System.Linq; namespace Ninesky.Areas.Admin.Repository { /// <summary&

模块管理常规功能自定义系统的设计与实现(36--终级阶段 综合查询[3])

综合查询(3)--查询条件的设置2 不仅仅对于模块才有这样方便的条件选择方式,对模块的字段也可以设置.例如对于"省份"中有个字段是"所属区域",这个字段不是一个manyToOne字段,而是一个字符串字段,里面就是存着"东北地区"."华北地区"等等这样的具体的字符串值.对于这样的字段也很容易将其放在toolbar上供选择.在模块字段中找到"所属区域"这个字段,修改字段的属性,让这个字段可以加到综合查询的too

模块管理常规功能自定义系统的设计与实现(33--权限设计[3])

权限设计(3) 三.字段的只读权限.对于可以修改记录的操作员,可以进一步限制哪些字段对于他是不可修改的.这个功能很少用到,是用户提出来的,我就顺便加了进去.实现这个功能也很简单建立只读字段角色,然后加入模块的字段,最后再将角色加到操作员上即可.前台在解释生成edit form 的时候,将这个字段的只读属性置为true即可.后台Hibernate在新增或保存的时候,可以把只读字段过滤掉,不能保存或不能修改即可. 四.字段的可视权限.有时候某些字段你不希望被某些群组的操作员看到,那么就设置一个隐藏字