webpack 引用nodejs模块_webpack webpack nodejs - CSDN
精华内容
参与话题
  • webpacknodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块。 原生模块的加载,比如: const path = require(“path”); 这个语句是webpacknodejs应用里经常使用到的。今天就来谈谈它的...

    在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块。

    原生模块的加载,比如:

    const path = require(“path”);

    这个语句是webpack和nodejs应用里经常使用到的。今天就来谈谈它的实现原理。

    还是通过单步调试的方式来学习。

    大家首先得通过我前一篇文章 webpack打包过程如何调试?学会如何调试webpack打包过程。

    require函数的实现位于file:///internal/module.js

    注意看第10行和第13行的requireDepth 加减一。因为一个module通过require被加载时,可能会递归地加载另外的依赖module,所以需要这个requireDepth字段来记录加载module的深度。

    这个module.js的实际地址位于当前项目文件夹下的node_modules文件夹下面:

    第11行的mod变量代表什么?

    从调试器看出,就是当前命令行node启动的webpack.js:

    mod.require(path)会将执行投递到Module._load函数:

    首先会去Module._cache里检查path模块是否已经加载了。在我这个例子里,path是第一次加载,所以Module._cache是空的。

    那么进入NativeModule.require(filename):

    nativeModule,即原生模块,里面也有cache缓存机制。

    因为path模块显然是原生模块,而非开发人员自己定义的模块,因此NativeModule.getCached返回了已经被预加载的path模块.

    cached.exports里包含了一系列函数,这些函数就是我们nodejs应用里经常使用的工具函数,比如join, parse, resolve等等。

    这就是nodejs和webpack里原生模块的加载原理。希望对前端开发人员有所帮助。

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

    展开全文
  • webpack篇:编译JS的正确姿势

    千次阅读 2016-08-13 10:25:26
    比如,一个单独的文件就是一个模块。使用require来加载模块,返回文件内部的exports对象。是否和nodejs的写法很像?确实,nodejs实现并推动了这个规范(一部分)。 有了这个规范,js可以在任何地方运行,不只是浏览...

    commonJS规范
    http://commonjs.org
    比如,一个单独的文件就是一个模块。使用require来加载模块,返回文件内部的exports对象。

    是否和nodejs的写法很像?确实,nodejs实现并推动了这个规范(一部分)。
    有了这个规范,js可以在任何地方运行,不只是浏览者中(未来很多只要兼容commonJS规范的系统都可以用javascript来开发)

    遵循这个规范,然后呢?
    这时候一个前端构建框架——webpack就产生了(模块打包)
    它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件。

    安装
    我们需要全局安装,这样在任何项目中都能使用到
    npm install -g webpack

    webpack是根据它的配置文件去打包的
    所以在项目根目录下新建一个webpack.config.js

    module.exports = {
        // entry是入口文件,可以多个,代表要编译那些js
        entry:['xxx.js'],
        output:{
            path:'./build/js', // 输出到那个目录下
            filename:'build.js' //最终打包生产的文件名
        },
    };

    最后,我们只需要在项目根目录下执行 $ webpack 就完成了打包工作

    展开全文
  • 欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 ...引用 Ctrl

    1、首先需要安装nodejs,并且是稳定版本,建议6.10.3

    • 安装依赖包Python 2.6,Ubuntu默认已经安装

    • 安装g++
      命令:
     sudo apt-get install g++ curl libssl-dev apache2-utils


    • 安装git
      命令:
    sudo apt-get install git-core

    已经安装git的请忽略~

    • 从官网上面下载nodejs6.10.3版本

    建议一定要去nodejs官网上下载最新版本!!!否则后面安装webpack会一直报错,无法执行!!!
    英文网址:https://nodejs.org/en/download/
    中文网址:http://nodejs.cn/download/
    下载tar.gz到本地目录下,然后解压,可以将名字改为nodejs,这样比较方便记住地址:

     tar -xvf   node-v6.10.0-linux-x64.tar.xz   
     mv node-v6.10.0-linux-x64  nodejs 

    接着,建立软链接,变为全局:

    ln -s /app/software/nodejs/bin/npm /usr/local/bin/ 
    ln -s /app/software/nodejs/bin/node /usr/local/bin/

    其中,app/software是你安装nodejs的目录,根据自己的地址需要修改!
    最后,检验一下安装是否成功:

    node -v

    如果弹出版本号6.10.3就成功啦!


    2、 安装webpack2.5.1版本

    • webpack相当于模块加载器兼打包工具!
      命令:
    npm install -g webpack //全局安装
    npm install -g webpack-dev-server //安装调试工具
    webpack和webpack-dev-server都需要全局安装,之前由于nodejs安装的版本不对,每次安装之后,都会报错!!!!(困扰自己好几天,而且各种百度,或者谷歌都很难找到答案!!!)

    发现还是因为webpack对于nodejs版本依赖很强!如果安装成功之后,我们执行命令:

    webpack -v   //查看webpack版本
    webpack-dev-server -v      //查看webpack-dev-server版本
    可以发现webpack的版本是2.5.1


    • 安装vue-vli
      命令:
    npm install -g vue-cli //全局安装vue-cli
    vue init webpack projectName //生成项目名为projectName的模板,
    cd projectName //进入项目文件
    npm install //初始化安装依赖

    其中vue init webpack projectName命令新建了一个vue项目,然后执行npm install就可以将该项目依赖的软件包都安装。
    最后,执行:

    npm run dev

    在网页输入localhost:8080就可以看到vue的首页了!

    展开全文
  • 在日常开发中,有时浏览器网页的功能需要调用nodejs中的模块,比如加密解密模块,本文将以nodejs的uniq模块为例,讲解如何在浏览器的js中调用nodejs的uniq模块。 2安装各个必须模块 本文操作所在的系统为centos7 ...

    1前言

    在日常开发中,有时浏览器网页的功能需要调用nodejs中的模块,比如加密解密模块,本文将以nodejs的uniq模块为例,讲解如何在浏览器的js中调用nodejs的uniq模块。

    2安装各个必须模块

    本文操作所在的系统为centos7

    2.1安装node

    本文使用编译好的二进制安装

    2.1.1下载

    wget https://nodejs.org/dist/v10.15.0/node-v10.15.0-linux-x64.tar.xz

    2.1.2解压缩

    xz -d node-v10.15.0-linux-x64.tar.xz
    tar -xvf node-v10.15.0-linux-x64.tar

    执行ls查看bin目录下的程序

    ls node-v10.15.0-linux-x64/bin

    [root@eos-testnet01 src]#ls node-v10.15.0-linux-x64/bin
    browserify  node  npm  npx  webpack  webpack-cli  webpack-dev-server
    
    2.1.3环境配置

    vi /etc/profile

    在文件末尾加入

    export NODE_HOME=/usr/local/src/node-v10.15.0-linux-x64
    export PATH=$PATH:$NODE_HOME/bin
    export NODE_PATH=$NODE_HOME/lib/node_modules
    

    执行下列命令更新配置

    source /etc/profile

    2.1.4验证

    在命令行输入

    node -v

    返回

    v10.15.0
    

    查看到版本即认为完成node的安装

    2.2安装npm

    一般安装完node,就自带了npm,在命令行输入

    npm -v

    返回

    6.4.1
    

    说明npm安装成功

    2.3安装browserify

    browserify是打包nodejs模块为浏览器js引用的工具。

    npm install -g browserify

    命令行输入

    browserify --help

    返回帮助信息,则说明安装成功

    3构建node项目

    3.1初始化

    选择开发目录创建文件夹

    mkdir hellotest
    cd hellotest
    npm init

    然后根据提示输入一些项目信息

    3.2安装nodejs的uniq模块

    在工作目录执行下列命令即可完成安装

    npm install uniq

    3.3创建入口文件

    执行命令

    vim index.js
    :wq

    无需键入信息,直接保存后退出

    3.4打包输出文件

    执行命令

    browserify -r uniq index.js > bundle.js

    4在浏览器端引用

    4.1创建index.html并引用bundle.js

    <html>
        <meta charset="utf-8">
        <head>
            <tittle>js调用nodejs模块</tittle>
            <script type="text/javascript" src="bundle.js"></script>
            <script type="text/javascript">
                function postStr(){                
                    try{
                        var uniq = require('uniq');
                        var nums = [5,2,1,3,2,5];
    
                        var numsUniq = uniq(nums)
                        console.log(numsUniq);
    
                        document.getElementById("info").innerHTML=numsUniq;
    
                    }
                    catch(err){
                        alert(err.message);
                    }
                }
            </script>
        </head>
        <body>
            <form action="">                 
                <p><div id="info">使用uniq函数后数组内容</div> </p>                    
                <p><input type="button" id="btn_post" onclick="postStr()" value="测试调用node函数"/></p>
            </form>
        </body>
    </html>
    

    4.2浏览器打开html

    index.html文件与bundle.js放在同一目录,然后浏览器打开,单击按钮,执行函数,即可输出uniq函数结果。如下图
    单击前
    在这里插入图片描述
    单击后
    在这里插入图片描述

    参考文献
    [1]:Browserify官网地址
    [2]:Cent OS6.5 安装nodeJS(分分钟搞定)
    [3]:browserify使用手册

    展开全文
  • Node.js非常适用于Web开发,但是现在无论是一个网站,还是Web App都已经成为包括很多不同部分,如前端、数据库、业务模块、功能模块等等的大型项目,使用Node.js从零开始进行Web开发,也许大中型团队能够 胜任,但...
  • 如何在 NodeJs 上搭建 React 开发环境

    万次阅读 2017-03-09 11:49:59
    步骤: 1. 安装 nodejs :根据你的 Windows 类型(x86或x64)下载... --注:在 windows 操作系统中,如果把 nodejs 安装在系统盘(如:C盘),初始化时会提示 nodejs 没有操作文件的权限(无法新建 package.json 文件)
  • node.js安装+webpack安装及环境搭建

    千次阅读 2018-09-11 22:42:39
    node.js安装: 引用:... node.js的第三方模块/包管理器,可以用于下载;更新;删除; 维护包依赖关系的工具 npm 工具默认www.npmjs.com网站下载所需的第三方模块 ...
  • NodeJS+Webpack入门:从安装到使用

    千次阅读 2019-06-18 21:05:47
    1.2 修改NodeJS安装模块路径: ​1.3 配置镜像源: 2.Webpack 2.1 Webpack安装 本地安装(推荐): 全局安装: 2.2 Webpack打包 手动打包: 热部署: 前言: 这是一篇从后端开发人员的视角出发,编写的关于...
  • webpack+vue2.0+nodeJs搭建环境

    万次阅读 2018-02-02 13:48:31
    webpack+vue2.0+nodeJs搭建环境 npm 和 nodejs还有淘宝镜像 npm 的全称是 nodejs包管理,现在越来越多的项目(包)都可以通过npm来安装管理,nodejs是js运行在服务器端的平台,它使得js的能力进一步提高,...
  • nodejs+gulp+webpack基础知识

    千次阅读 2019-08-22 11:49:40
    知识点涉及怎么结合gulp、webpack、Babel等并结合NodeJS+NPM开发前端。 第一章:开脑与热身 第二章:gulp和webpack混合学习 第三章:前端利器Babel+ES2015体验学习篇 第四章:webpack+gulp+sass学习篇 第五章:...
  • 企业级电商平台-前端搭建(有源码)

    千次阅读 2018-09-15 09:24:32
    目标 整体架构() 业务功能实现 ... 模块化思想    架构 工具  WebPack NodeJS NPM Shell Charles Git 前台 后台 需求分析 技术选型 同一域名,同一请求的...
  • 所以用到打包工具比如webpack,可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理,让前端开发更爽。 最后Vue.js是数据驱动,和JQuery思路不同,你几乎不需要自己进行复杂低效的...
  • Vue SPA + Nodejs项目实战

    万次阅读 2017-06-23 11:06:48
    Vue SPA + Nodejs项目实战文章链接:http://blog.csdn.net/i348018533/article/details/73605176本文主要阐述的是使用了...面向对象是有一定前端开发基础对vue nodejs webpack有一定认识的开发。Vue简介介绍 自底向上
  • 由于之前就安装了nodejs ,但是今天在学习项目的时候要进行前端的包打理,根据文档,各种安装不成功webpack,当时心里都要崩溃了,于是我果断卸载了,卸载完成后安装更崩溃了,各种崩溃了 于是就开始找资料 第一步,...
  • webpack配置浅析

    千次阅读 2016-05-18 14:09:17
    众所周知,webpack已经相当流行,你或许已经Google了一下webpack是什么鬼,或许已经知道了需要个webpack.config.js文件……,但是具体的配置你已经清楚吗?if(是) {此处就省略一万字。return}. 1、webpack的引子...
  • Webpack 简称模块打包机 在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端...
  • 工作上遇到个后台的项目,express + vue 写的,用了Webpack Hot Middleware配合webpack-dev-middleware来让客户端连接到客户端,使用nodemon来监听重启服务器。但是webpack打包前端静态资源的速度还是比较慢的,每一...
  • 使用vue+webpack的多页面框子

    万次阅读 2016-09-13 18:09:17
    首先,要大概知道webpack是什么,webpack的插件都是做什么用的,vue是什么,然后看完之后也可以去补充一下这些方面的知识。第一步:安装环境需要安装的有: nodejs,并添加入环境变量PATH 使用nodejs安装vue-cli ...
  • WebPack系列教程(六):使用LOADERS

    千次阅读 2016-03-09 15:39:20
    什么是loaders? loaders被应用于应用程序的资源文件中,...它们都是函数(运行在nodejs中),将资源文件的源码作为入参,处理完后,返回新的源码文件。 例如,你可以使用loaders告诉webpack加载coffeescript和jsx。
  • 使用 webpack 引用 zepto

    千次阅读 2018-02-27 13:51:00
    作者:陈家宾 日期:2017-12-15 背景 由于 zepto 库本身不支持 CommonJs 规范,不支持 import/export,所以...方法一:引用 zepto-webpack 库 安装 npm i -D zepto-webpack 引用 import $ from 'zep...
1 2 3 4 5 ... 20
收藏数 4,085
精华内容 1,634
关键字:

webpack 引用nodejs模块