非模块化方式开发的痛苦 (1)命名冲突 起初,我们定义了一个通用功能的JS文件,例如 utils.js(其中有一个 each 函数),谁需要谁调用即可 但随着项目和团队越来越大,就会出现问题 小杨在自己的 a.js 中也定义了一个 each 函数,这时有人同时引用了 utils.js 和 a.js,冲突就出现了,小杨只好把自己的 each函数名改为别的,再通知别人改名了,之后,不同开发人员之间不断出现这类问题 后来,团队决定引入命名空间,对 utils.js 进行改造 var org = {}; org.C
组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 什么是组件: 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样式。 一个组件通常包括开始标签和结束标签,属性来修饰这个组件,内容在两个标签之内。 <tagname property="value"> Content goes here ... </tagname> 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 本期给大家带来的是7个微信
在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,在ES6以前,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。如果要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS。
上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出。
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/common/utils', { isMod: true, moduleId: 'utils' // 为utils设置一个moduleId,希望以后能直接require('utils') }) .match('::package', {
无论是前端开发者还是后端开发者,都会在项目中封装一些经常使用的功能方法,可以大大提高我们的开发效率
作者:feix760 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/common/utils', {
本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载 首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match
项目中我们常常会接触到模块,最为典型代表的是esModule与commonjs,在es6之前还有AMD代表的seajs,requirejs,在项目模块加载的文件之间,我们如何选择,比如常常因为某个变量,我们需要动态加载某个文件,因此你想到了require('xxx'),我们也常常会用import方式导入路由组件或者文件,等等。因此我们有必要真正明白如何使用好它,并正确的用好它们。
系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf.js 4、build/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js 9、../config/index.js 下面是build/vue-loader.conf.js中相关
运行程序,发现会报错 Cannot use import statement outside a module ,意思就是不让用 import 语法。
在这篇文章中,我们将研究什么是 CommonJS,以及为什么它会使你的 JavaScript 包变得那么大。
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口)---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、R
最近面试,问道js,css版本控制问题,一时间忘记,没答上来,下来查阅资料,整理一下。
最近了解了下opencv,看了下官方的实例和文档 opencvjs文档入口 3.3.1版本 看了官方示例的网页结构 基本上所有的实例都用到了两个js 核心js:opencv.js 工具js:utils.js 官方给出的方案是
做微信公众号的时候我们经常会遇到一个问题,就是我们需要进行简单的身份认证,也就是我们需要拿到公众号登录成功以后的code,其实这个code是为了获取登录者的openid用的,每次获取到的code是不一样的,其实我们做开发的时候我们是在微信的后台配置里面将code配置在url中的,在进行一次微信的转发以后直接就可以在url中拿到code,这个其实在之前的jquery中是写过了怎么获取的,这次只是将这个js用到 vue中,没有别的什么特别的意义,希望以后直接哪来用就可以。
大家好,我是零一。虽然现在很多前端项目都在用Vue、React,但依赖jquery的项目也不少,尤其是年代比较久远的项目,那些还正在维护jquery项目的你,是否想将jquery从你的项目中移除?毕竟这个库那么大,你能用到的代码也就只有15%~30%,而且jquery对各个浏览器的兼容性也做了很大的处理(代码量up up),但其实很多老项目也不会去考虑兼容很边缘的浏览器了,所以其实jquery中兼容处理的代码也没太大必要
在项目中你有优化过自己写过的代码吗?或者在你的项目中,你有用过哪些技巧优化你的代码,比如常用的函数防抖、节流,或者异步懒加载、惰性加载等。
上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内
Redux 是JavaScript 应用的状态管理容器,提供集中式、可预测的状态管理。
Monorepo这个词你应该不止一次听说了,像Vue3、Vite、ElementPlus等优秀开源项目都是使用Monorepo的方式管理项目,且这里说到的这几个项目都是采用pnpm作为包管理工具。
本文是 基于Vite+AntDesignVue打造业务组件库[2] 专栏第 7 篇文章【在发布组件库之前,你需要先掌握构建和发布函数库】,聊聊怎么构建和发布一个函数库。
前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋。
在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率。
对于一份同逻辑的代码,当我们手写了一个个的文件,它们无论是 ESM 还是 commonJS 或是 AMD,他们都是 module; 当我们写的 module 源文件传到 webpack 进行打包时,webpack 会根据文件引用关系生成 chunk 文件,webpack 会对这个 chunk 文件进行一些操作; webpack 处理好 chunk 文件后,最后会输出 bundle 文件,这个 bundle 文件包含了经过加载和编译的最终源文件,所以它可以直接在浏览器中运行。 一般来说一个 chunk 对应一个 bundle,比如上图中的 utils.js -> chunks 1 -> utils.bundle.js;但也有例外,比如说上图中,我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。
本质上,有两种构建JavaScript应用程序的模式:开发和生产。以前,您已使用开发模式在本地开发环境中开始使用Webpack Dev Server。您可以更改源代码,Webpack再次将其捆绑,Webpack Dev Server会在浏览器中向您显示最新的开发版本。
本质上,有两种构建JavaScript应用程序的模式:开发和生产。以前,您已使用开发模式在本地开发环境中开始使用Webpack Dev
在编辑器中打开以下文件: /usr/local/lib/node_modules/npm/node_modules/uid-number/uid-number.js 到 11 行,将 uidSupport = process.getuid && process.setuid 修改为 uidSupport = false
该文章介绍了浏览器中的ECMAScript模块,包括模块的导入和导出,以及如何使用type=module和nomodule来优化加载,同时还介绍了模块脚本的延迟加载和内联模块脚本的处理方式。
原文:https://jakearchibald.com/2017/es-modules-in-browsers/
以树状图列出目录内容的 nodejs 实现,类似于 linux 下的 tree 命令,支持设置 输出目录层级和 忽略文件(夹) 以及指定目录。支持mac和windows 双平台。
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── pro
最近的那个项目,因为多处记录功能需要写入存储时间,如果每个页面都写一次会使得代码太臃肿,所以我们使用封装函数调用。
系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf.js 4、build/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js 9、../config/index.js 下面是webpack.prod.conf.js中相关代码和配
SheetJS js-xlsx 是目前关注度最高的处理 Excel 的 JavaScript 库。支持 XLS/XLSX/CSV/ODS 等多种表格格式,功能强大,但文档看起来有点累。本文主要是介绍下 js-xlsx 的基本概念和操作。
原文: https://element-plus.gitee.io/zh-CN/component/transfer.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 效果 📷 代码: <template> Customize data items using render-content <div style="text-align: cente
Customize data items using render-content
系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf.js 4、build/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js 9、../config/index.js 下面是webpack.dev.conf.js中相关代码和配置
2-4 高端操作:脚手架架构设计+绘制架构图 / 2-5 架构设计图绘图技巧分享
const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-style-loader的 const config = require('../config')// 引入config目录下的index.js配置文件,主要用来定义一些开发和生产环境的属性 const vueLoaderConfig = require('./vue-
在上一节中我们初步了解了webpack可以利用内置静态模块类型(asset module type)来处理资源文件,我们所知道的本地服务,资源的压缩,代码分割,在webpack构建的工程中有一个比较显著的特征是,模块化,要么commonjs要么esModule,在开发环境我们都是基于这两种,那么通过webpack打包后,如何让其支持浏览器能正常的加载两种不同的模式呢?
随着前端模块化的兴起,特别在 vue、react等一些热门框架的崛起,越来越多的公司加入了这一阵营。提及前端的模块化(这里主要说的是Javascript语言的模块化),就不得不说 es6标准提出的 export 和 import 两个命令了。当然还有 commonJS里的 module.exports 和 require 这一对组合了,这里暂不介绍这两组命令的具体用法。以后 我会专门写一篇文章介绍这两个命令的用法。我们以 es6中的 export 和 import 为例,介绍一下:
自定义 React Hook 是一个必要的工具,它可以让你为 React 应用程序添加特殊的、独特的功能。
在 node 环境中,有两个内置的全局变量无需引入即可直接使用,并且无处不见,它们构成了 nodejs 的模块体系: module 与 require。以下是一个简单的示例
今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有考虑报告的模块化区分,九月底产品提出新的
框架设计远没有大家想的那么简单,并不是说只把功能开发完成,能用就算完事儿了,这里面还是有很多学问的。比如说,我们的框架应该给用户提供哪些构建产物?产物的模块格式如何?当用户没有以预期的方式使用框架时是否应该打印合适的警告信息从而提升更好的开发体验,让用户快速定位问题?开发版本的构建和生产版本的构建有何区别?热跟新(HMR:Hot Module Replacement)需要框架层面的支持才行,我们是否也应该考虑?再有就是当你的框架提供了多个功能,如果用户只需要其中几个功能,那么用户是否可以选择关闭其他功能从而减少资源的打包体积?所有以上这些问题我们都会在本节内容进行讨论。
'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要用来处理css-loader和vue-style-loader的 const utils = require('./utils') //引入config下面的index文件 主要是配置一些开发环境和生产环境的配置 const config = require('../config') //用来解决各种css 文
本节涉及的内容源码可在vue-pro-components c7 分支[1]找到,欢迎 支持!
领取专属 10元无门槛券
手把手带您无忧上云