zoukankan      html  css  js  c++  java
  • 谈谈前端模块管理

      以前,写个项目用到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规范。

  • 相关阅读:
    forEach 不能跳出循环;用some 或者every 代替
    echarts图表不重新渲染
    vue 的el-tree获取选中节点的集合执行多次问题
    vue 2.6版本 手动配置json文件显示隐藏
    echart category series 数据多个 长度不对应 对应的数据一定要用字符串 不要用数字
    nginx前端配置后端
    UCOS多任务下有效的喂狗的方式
    判断数据类型
    PDFJS插件带添加header以及携带授权
    vue中控制浏览器前进和后退
  • 原文地址:https://www.cnblogs.com/fangshidaima/p/5984075.html
Copyright © 2011-2022 走看看