import引入类似这种文件,一定要用webpack去编译吗 module.pxports 是CMD规范的一个全局函数,功能是当前模块对外提供接口.require可以直接使用这个接口.例子: echo.js var Echo = function(str){ console.log(str) } module.pxports = Echo index.js var echo = require('echo.js') echo(123) // 123 具体查看:CMD 模块定义规范 需要转成浏览器…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三…

module.exports 前文讲到在Angular Material的第二个编译文件docs/gulpfile.js中却看到了一个奇怪的东西module.exports那么module.exports是什么东西呢? 一直以来,javascript最大的诟病就是全局变量,这也成为大型应用开发的最大阻碍.因此,很多人使用了很多方式来解决这个问题.如模块模式(Module Pattern), 而node.js这实现了模块装载系统,来解决组件实现的基本问题. 自从开始研究前端,我也几个相关的关键词在…

vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks.json”文件,内容为: { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0…

背景 公司项目需要裁切功能,基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库,仅限于公司内部使用) 在vue-cropper从0.4.0更新到0.4.4后,picture-cut组件使用裁切功能时报错 vue-cropper0.4.0的index.js文件导出方式如下 var vueCropper = require('./vue-cropper') module.exports = vueCropper vue-c…

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().…

网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云官网去购买一台,趁现在阿里云搞活动.(ps:我并没有打广告) 然后我们准备我们的前端项目不管你是vue项目还是普通的jquery写的项目都是一样的,本文的前端项目是vue. 通过git把他克隆到我们的服务器下面,我的前端项目就放在/home 下面是我前端项目的目录和内容,我们主要是用到打包后的dis…

这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码. [基于Webpack的React Hello World项目] 1．前期必要配置 (1)首先要确保读者的开发设备上已经安装过Node.js,新建一个项目: mkdir react-hello-world cd react-hello-world npm init -y (2)项目中使用的是Webpack 4.x,在项目根目录下执行: npm i webpack webpack-cli -D 注意:上面命令代码中npm ins…

背景 什么是tapable.hook,平时做vue开发时的webpack 配置一直都没弄懂,你也有这种情况吗? 还是看源码,闲来无聊又看一下webpack的源码,看看能否找到一些宝藏 tapable和webpack没有特定关系,可以先看下这篇文章,了解下这个小型库 https://webpack.docschina.org/api/plugins/#tapable https://blog.csdn.net/mafan121/article/details/113120081 4.下面记录下寻宝…

一:导入如百度地图等的外部类. 步骤:1.首先 将androidstudio项目显示切换到 project 状态显示项目 2.然后添加.jar文件,将所有的.jar文件放入libs文件夹内(libs文件夹就在项目文件夹下),然后在引入的.jar文件上右键然后点击 Add As Library... OK jar文件引入. 3.添加.so文件,在项目下的src目录下的main目录下新建jniLibs文件夹,然后将so文件连带着他外面的文件夹整个复制到jniLibs文件夹下(注意:so文件不能直接存…

nodejs中一个js文件就可以看做是一个模块 在node环境中,可以直接var a=require('模块路径以及不带扩展名的模块名') exports---module.exports 其中node准备好了module变量, var module={ id:'hello', exports:{} }; 输出模块变量,最好都用module.exports=''或者函数;当赋值不是函数或者数组时,可以对exports直接赋值,建议统一使用module.exports=进行赋值…

Dockerfile + Nginx.conf文件记录(用于前端项目部署) 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统(敏感信息都进行了处理),默认服务器安装了docker以及nginx 此文结合另一篇博客共同构成前端服务部署的教程,特此记录.我使用了Docker进行发布,并使用了nginx进行静态资源处理,这里并不详细解析Dockerfile以及Nginx.conf的作用以及内部指令. Dockerfile FROM nginx:1.15.2-…

我在运行renren-fast-vue前端项目时,安装完依赖cnpm install 启动服务npm run dev 出现问题. Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (67) 我以为是我安装Node太高了(升了下级node-v13.9.0),我尝试卸载重新安装Node(v11.9.0)…

当手工增加一个module,增加配置文件(如:web.xml)需要合并到文件夹里,要不众多文件在一个src文件夹下,太凌乱. 1. 合并到webapp/WEB-INFO下 a. 首先增加webapp目录,右键Mark Directory as/ Resources Root b. 在webapp目录下增加WEB-INFO目录 c. 将web.xml文件剪切到WEB-INFO目录下 2. 在src目录下,增加WEB-INFO包,将web.xml文件剪切到WEB-INFO包下…

前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务端同学那里修改代码,维护成本高,卖力不讨好＝＝ 工作了这么久,深深的感受到了那句名言的魅力,时间就是金钱呀!后来我发现,现在的web开发,谁还用这种低级的方法,大家都已经开始搞前后端分离了! 前后端分离的目的和作用 要弄清前后端分离的目的和作用,首先要知道什么是前后端分离. 现在的web前端越来越偏…

什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行效率低,学习成本高的问题.所以最近几年对于前端构建工具--grunt就应运而生. Grunt能做什么呢? 按任务目标大致可分为四类:   1. 文件操作型:比如合并.压缩js和css文件等(包括). 2. 预编译型:比如编译less.sass.coffeescript等. 3. 类库项目构建型:比如…

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢…

前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通过下面的方法对前端项目进行优化,减小打包后生成的js大小,从而提高加载速度.下面以USM项目为例,进行优化: 一.公用静态资源通过CDN加载 目前所有项目都通过npm包的形式引入vue.vue-router.axios.vuex.element-ui.ucar-view这些第三方包,webpack打…

webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · 输出 · 配置 · 组件 · 加载器 · 插件 · 模块 · 模块热替换 下面我们一步步的搭建webpack,逐步讲解上诉模块 开发环境 推荐使用JetBrain的Webstorm,有强大的代码提示,支持JSX和ES6语法: 我们将会使用npm来下载和构建依赖,现在网上也有很多人使用yarn来安装,…

1. grunt构建工具是基于nodejs上的,所以在使用之前一定要先安装好nodejs 2. 安装好nodejs后,node -v查看node版本 npm-v 查看npm版本信息 3. 在需要用到的项目文件下安装grunt,安装命令 :npm install grunt ,安装之后无法执行grunt命令,需安装一个全局的grunt-cli ( grunt命令操作 ) 安装命令:npm install -g grunt-cli,再使用 grunt --version 查看grunt-cli版本…

github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手,应用层会下发数据给传输层,这里 TCP 协议会指明两端的端口号,然后下发给网络层.网络层中的 IP 协议会确定 IP 地址,并且指示了数据传输中如何跳转路由器.然后包会再被封装到数据链路层的数据帧结构中,最后就是物理层面的传输了 TCP 握手结束后会进行 TLS 握手,然后就开始正式的传输数据(如…

一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整.因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定. PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当…

参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置属性,不附带实例,将会以通俗易懂的形式地讲解:如若需要实例进行相关练习,可将本文作为理论基础: Webpack是前端项目自动化构建工具,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构…

vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cli 的前端项目初始化模板时,就需要去思考:我该怎么做? 我们要做的事情很简单,就是当别人使用 vue create xxx 命令初始化一个前端项目时,可以从 git repo 去拉取项目初始化信息,好处有两点: 团队内部所有的新项目都是统一的目录结构和代码组织方式,便于维护 后期可以开发公共插件服务于不…

前言 公司据说要搞前后端分离,趁这两天项目完成的差不多,抓紧时间学习一下前端知识 现在流行前端项目工程化,那么第一个问题就是如何创建工程(项目),第一次玩webpack 通过 NPM 创建项目 # 创建项目 npm init -y -y 在这里是表示快速新建.使用 npm init 来初始化,终端会一步一步提示输入 name.version.description 等项目 meta 信息,通过使用 flag -y 跳过所有的 prompt,一路到底完成默认值的初始化. 完成后 NPM 会自动在目…

1.简介 使用gulp搭建一个传统的多页面前端项目的开发环境 支持pug scss es6编译支持 支持开发环境和打包生成sourceMap 支持文件变动自动刷新浏览器,css是热更新(css改动无需刷新浏览器即可更新) 支持新增文件没无需重启gulp,即可改动自动刷新浏览器 支持eslint,使用的eslint插件是eslint-config-alloy 支持打包html,css,js图片压缩,css中小图片转base64 支持css,js文件版本hash值,文件无变动则版本hash不会改变,…

https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反,fekit帮我们做了很多事情,还屏蔽了许多细节,让开发人员能够专注于开发过程.不过随着fekit的升级,也出现了一些问题,同时fekit和公司业务及发布流程有一定耦合,所以觉得采用开源的构建方案. 在使用gulp的过程中,基本也是依据使用fekit的思路来逐步完善构建过程的,所以还是要感谢fekit…

初学,目前对grunt的理解和需求仅在于简单的文件合并.压缩.语法检查,其强大功能还有待研究. 安装前环境准备 (1)grunt依赖nodejs运行环境,所以要玩grunt得先把nodejs安装好,nodejs安装复杂不?一点不复杂,文件也不大,直接下载安装即可. nodejs下载地址:http://nodejs.org/ 安装grunt (1)安装好nodejs后,就可以安装grunt.grunt安装是不是也要下载个安装文件?度娘和google发现,都是采用npm这个玩儿来安装,具体采用文件安…

vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:www.zhoupeng520.cn/index.html 3.项目主要目录     4主要代码如下   (1)App.vue <template> <div id="app"> <router-view class="view">&l…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…