zoukankan      html  css  js  c++  java
  • Browserify

         介绍:
          Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过 预编译 让前端 Javascript 可以直接使用 Node NPM 安装的一些库。 -- 来自百度百科
          参考链接:https://baike.baidu.com/item/browserify/16823990?fr=aladdin
          参考链接: http://browserify.org/ 官网
        步骤:

               一、在桌面新建一个 browserifytest 文件夹,并在命令行中进入该目录:

                         mkdir Browserifytest

                         cd Browserifytest

              二、项目初始化:npm init

              三、我们的主要目的是本地的 js 文件可以引用 server 的 js 文件

              四、安装包 uniq :cnpm install uniq --save

              五、在项目中新建文件 index.js test.js index.html

              六、编辑文件

                   index.js : 

                         var unique = require('uniq');

                       var test = require('./test.js');

                        test(unique);

                   test.js  :

                        module.exports = function(cheerio){

                   console.log('我是服务端',cheerio);

                         };

                   index.html:新建文件     引入bundle.js 文件夹

                      

              七、在全局安装 Browserify 库 :npm install -g browserify 或 cnpm install -g browserify

              八、把 index.js 文件编译成一个 bundle.js 文件 :browserify index.js -o bundle.js

                   编译成功之后 项目中会多一个 bundle.js 文件.

        九、然后把 index.html 文件在浏览器中打开,查看控制台输出如下,便证明引用成功了

                      

          

           

        总结:

             1. webpack 包管理器 核心基于 loader ,编译 Node 会多出很多无用的代码。

             2.  gulp / grunt 基于文件流,更快,可以用它去编译 Node / 基于文件 I/O。

             3.  yo 发布一些自己的模块。

             4.  bower 安装依赖。

             5.   browserify 能够让本地的 js 应用服务端的 js,让 js 直接就具有 require 的能力

  • 相关阅读:
    React网络请求fetch之post请求
    从ajax到fetch到axios
    了解 Fetch API与Fetch+Async/await
    new FormData() 前端上传文件图片到服务器
    ES7之async/await同步编程异步函数
    React网络请求fetch之get请求
    React非受控组件
    React 组件优化之函数防抖节流---使用 debounce +throttle 函数
    【LeetCode】86. Partition List
    【LeetCode】122. Best Time to Buy and Sell Stock II
  • 原文地址:https://www.cnblogs.com/whx123/p/12105905.html
Copyright © 2011-2022 走看看