首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端包管理工具 npm yarn cnpm npx

    * 包管理工具的产生背景 我们通过JavaScript模块化的方式,把代码划分成一个小小的结构,并且封装成一个模块工具。...当我们的同事也想使用这个工具的时候,可以手动导入给他 当我们想分享给更多人的使用,该怎么做呢?一般来说方式有两种。...方式一 上传到github,其他人通过github下载我们的代码,手动引用 * 需要手动引用,手动管理依赖,手动控制风险较大。 * 当版本更新或者删除依赖时,需要重复上面的操作。...问题产生 我们以webpack为例: 全局安装的是webpack5 项目安装的是webpack3 如果我在终端执行 webpack --version使用的是哪一个命令呢?...现在前端最火的应该是pnpm,我在下篇文章会和大家分享,敬请期待

    88320

    关于 Echo 项目该如何写在简历上

    前言 首先需要说的是,是不是一定要从头到尾敲一遍,才能把这个项目写到简历上?是不是一定要把代码开源出来?是不是一定要把项目上线?...都不用,只要你对这个项目非常了解,你知道每个模块都是怎么做的,具体的技术点是什么样,具体的开发流程是什么,我觉得你不从头到尾敲一遍代码也是可以的(当然大部分同学可能由于缺乏实际的项目经验都做不到,所以建议还是实际上手敲一遍...至于需不需要代码开源,需不需要代码上线,那当然有的话是最好的,毕竟放在简历上有个可以点开的地址,也能让面试官知道这确实是你自己做的东西。...项目收获: 项目收获我觉得其实没啥必要写出来,如果简历上的内容超过一页但又不够俩页的话,我一定会把项目收获这块给删了凑成一页(狗头)。...另外,如果是某些大型项目,各位只是做了项目中的某一个部分,需要写清楚你在组内担任的角色,具体做了啥,比如你是小组的后端开发,负责点赞模块啥的。

    48810

    Deno不只是个Javascript运行时

    node 运行时环境,因此需要在项目工程下手动配置并启用 deno,让 vscode 以 deno 运行时环境来语法解析 ts 代码。...你可以在项目工程中添加配置文件 deno.json来定制化代码风格(rust 中也有类似的功能),但在 node 中必须要借助第三方的库,或是 IDE 才能实现。...提示 node 也不一定要用 npm 来下载模块,也可以本地模块或者私有模块。 关于中心化与去中心化管理,各有优缺,这里不做细致讨论。...这里我准备了一段代码,并部署到我的站点上,你可以通过如下命令得到该代码的执行结果(如果你有安装 deno 的话),放心这段代码并无危害,就是一段简单的 console.log 输出。...如果你不想刷 deno 文档,想快速上手 deno 的话,这里我建议推荐看看 deno 官方所推荐的deno 代码例子 ,能够非常快速有效了直接了解 deno 标准库以及依赖导入导出。

    1.2K20

    如何开发自己的第一个 Serverless Component

    ,它会像安装 npm 包一样,自动安装到本地,然后自动注入该组件模块,同时执行组件中的 default 函数(之后会讲到),从而完成部署流程。...开发步骤 一个完整组件的开发流程应该包括以下流程: 明确功能需求 定义组件配置:输入和输出参数 组件开发:default 函数、remove 函数(可选) 测试组件 发布 npm 包 接下来将按照以上步骤...明确功能需求 腾讯云 CDN 控制台 已经提供了手动配置加速域名的功能,但是作为一名懒惰的程序员,「手动」 一直都是我尝试规避的问题。于是去看了看腾讯云文档,看看官方有没有提供相应便捷的方式。...,定制化配置就好。...注意:虽然一个 Serverless Component 是一个 npm 模块,我们可以通过 package.json 中的 main 属性指定项目中任意的文件入口,但是如果没有 serverless.js

    70331

    前端工程化发展历史

    之所以有这个工具,是因为我们所依赖的那些模块往往被发布在 npm registry 中。 npm registry? 它是一个存放着世界各地的人们编写的代码模块的仓库。 就像是 CDN? 不太一样。...哦哦,明白了,那我用 npm 下载所需要的库文件就行了。 是的,如果你想使用 React,你只需要下载 React 模块,然后 import 到你的代码中就可以了。...所以我如果想使用 React ,只需要从 npm 下载相应的库,然后用 Browserify 打包就可以了吧? 是的。 但这看起来很复杂,需要下载那么多库,然后再它们打包起来。...你需要做很多的前置动作才能让项目准备好,压缩资源、混淆代码、内联 css 、延迟加载 js,还有… 明白了,明白了。所以如果不用 CDN 去加载库的话,你会怎么做?...我需要从 npm 加载它的核心库? 对的。 我还需要 Browerify 或者 Webpack 或者 SystemJS 来管理这些模块? 对的。

    78920

    在老项目中集成Eslint【02】

    如果你是使用VUE-cli去生成项目的话一般会内置这个包同时在scripts中内置检验命令,而如果是我们自己手动配置的话是没有的,所以我们手动来配置一下这两条命令: airbnb-base规则参考 "lint...,当然如果每次复制也会很麻烦 我们也可以定制一份eslint-config-xxx适合自己团队的规范发布到npmjs市场或者发布到公司的内部npm平台,这样就可以每次在项目npm下载即可,这种方式进一步提高了配置的简单性...,但是依然还需要手动去实现一些东西 更好的方法我们可以继承到公司的cli工具中,通过脚手架一键生成此类配置文件会相对更为便捷,同时每次更新只需要从脚手架更新即可,同步可以进行更新,这样可能对团队来讲较为便捷...这样当Prettier格式化代码的时候,依然能够遵循我们的Eslint规则。如果你禁用掉了所有和代码格式化相关的Eslint规则的话,该插件可以更好得工作。...也可以设置基于年份的JS标准,比如2015(ECMA 6) sourceType: 如果你的代码是ECMAScript 模块写的,该字段配置为module,否则为script(默认值),基本上我们都需要配置为

    1.3K30

    【Web技术】848- 超棒的 Babel 上手指南

    babel-polyfill babel-runtime 配置 Babel (进阶版) 手动指定插件 插件选项 基于环境定制 Babel 构建自己的 Preset Babel 和其他工具 静态分析工具...在这本 Babel 手册中,我将讲解 Babel 内建的一些工具以及社区里的一些拥有的工具。...注意:本指南将参考诸如 node 和 npm 之类的命令行工具。在继续进行任何操作之前,您应该对这些工具感到满意。 babel-cli Babel的CLI是从命令行使用Babel编译文件的简单方法。...手动指定插件 Babel 预设只是预配置插件的集合,如果您想做不同的事情,可以手动指定插件。这几乎与预设完全相同。...提示:如果要让命令在 Unix 和 Windows 跨平台上运行,请使用 cross-env[9]。 构建自己的预设 手动指定插件?插件选项?基于环境的设置?

    53330

    深入了解Babel

    且 Babel 被组织成几个核心的模块,允许用户利用这些模块来构建下一代 JavaScript 工具链。 许多人也是这样去做的,Babel 的生态系统正在茁长的成长。...在这本 Babel 手册中,我将讲解 Babel 内建的一些工具以及社区里的一些拥有的工具。...您必须明确告诉Babel 它应该做什么。 您可以通过安装 plugins 或 presets (plugins 组)为Babel提供操作说明。...配置 Babel(进阶版) 大多数人都可以通过仅使用内置预设来使用 Babel,但是 Babel 所展现的功能远不止于此 手动指定插件 Babel 预设只是预配置插件的集合,如果您想做不同的事情,可以手动指定插件...当 BABEL_ENV 不可用时,它将回退到 NODE_ENV ,如果不可用,则默认为“ development ”。 构建自己的预设 手动指定插件?插件选项?基于环境的设置?

    65430

    你想知道的关于 Babel 及其相关工具使用都在这里了!

    babel-polyfill babel-runtime 配置 Babel (进阶版) 手动指定插件 插件选项 基于环境定制 Babel 构建自己的 Preset Babel 和其他工具 静态分析工具...在这本 Babel 手册中,我将讲解 Babel 内建的一些工具以及社区里的一些拥有的工具。...注意:本指南将参考诸如 node 和 npm 之类的命令行工具。在继续进行任何操作之前,您应该对这些工具感到满意。 babel-cli Babel的CLI是从命令行使用Babel编译文件的简单方法。...手动指定插件 Babel 预设只是预配置插件的集合,如果您想做不同的事情,可以手动指定插件。这几乎与预设完全相同。...提示:如果要让命令在 Unix 和 Windows 跨平台上运行,请使用 cross-env[9]。 构建自己的预设 手动指定插件?插件选项?基于环境的设置?

    89130

    2022年面向前端开发人员的9个最佳UI组件库框架

    例如,如果你想更改应用程序中所有按钮的配色方案或字体大小,只需要更改代码中的一个变量,而不必为每个按钮手动更改。 更快的原型:你可以在开始实际项目之前使用现成的组件创建几个功能正常的原型。...Tailwind的目的是帮助你构建快速、模块化和响应迅速的网站,帮助你缩短开发时间并编写更干净、更易于维护的代码。 Tailwind提供了一系列模块化混音和功能,你可以在自己的样式表中使用。...4)FlowBite FlowBite是一个模块化的CSS组件库,用于更快、更轻松地进行Web开发。它通过响应式网格、一致的排版、可定制的组件和可扩展的架构为你的项目奠定了坚实的基础。...到目前为止,它已被下载超过2300万次(npm),并拥有约29,000多颗GitHub星。 Foundationv6提供了最先进的响应式前端框架。它轻巧、快速、现代——网站应该的样子!...由于使用了风格道具,定制组件和主题非常容易。它专注于开发过程,并承诺你将花费更少的时间编写代码,花更多时间构建出色的用户体验。

    16.9K73

    怎样才能写出更好的 CSS

    如果你想了解更多信息,请查看相应的文档 戳这里。文档写得很好,且易于理解。 2. 组织 CSS 代码:BEM 方法论 我记不清曾经多少次在CSS类中使用包揽一切的名字了。...如果需要建造一个简单的房子,你会怎么做?你需要一个窗户,一个屋顶,一扇门和一些墙壁。这些就是我们的块。它们有着本身的意义。...如果你是一个好奇心很重的人(我希望如此,因为开发人员应该好奇!)那么,请点击这里查看 完整的文档。 现在我们知道需要用哪些工具。其余的工作更简单。...这里为你设置了一个代码仓库,以帮助你迅速开始:) 如果你想知道我是如何在项目中应用这些技术的,请点击这里查看 代码仓库 和 结果。希望你能通过这些例子更深入理解。...现在,你可以准备开始编写具有可维护性、模块化和可重用性的 CSS 代码了。 小伙伴们,加油!!!

    1.7K10

    Week3-脚手架核心流程开发

    commands 【初始化、发布、清除缓存】 模型层: models 【Command命令 、 Project项目 、 Component组件 、 Npm模块 、 Git仓库】 支撑模块...:即可看到输出日志 git代码提交扩展 我将此代码通过分支的形式,对每一次的代码提交,都在一个特殊的分支进行代码提交。...lesson01 git checkout main git merge lesson01 git push 删除本地分支 git branch -D lesson01 如果后面我们想要修改该分支代码并提交到该分支...环境变量其实就是一个全局变量,如果我们有很多的环境变量需要使用,可以直接在.env文件宏进行配置 4-8 通用npm API模块封装 | 4-9 npm全局更新功能开发 准备阶段的最后一个功能:检查我们的这个脚手架是否为最新版本...步骤: 获取当前版本号与模块名: pkg.version | pkg.name 调用npm API获取所有模版号: npm提供了这样一个API: https://registry.npmjs.org

    91430

    2018 年了,你还是只会 npm install 吗?

    场景1: 本地模块引用 nodejs 应用开发中不可避免有模块间调用,例如在实践中经常会把需要被频繁引用的配置模块放到应用根目录;于是在创建了很多层级的目录、文件后,很可能会遇到这样的代码: const.../config.js'); 除了看上去很丑以外,这样的路径引用也不利于代码的重构。并且身为程序员的自我修养告诉我们,这样重复的代码多了也就意味着是时候把这个模块分离出来供应用内其他模块共享了。...此时我们可以手动进入 node_modules 目录下修改相应的包内容,也许修改了一行代码就修复了问题。但是这种做法非常不明智!...在 npm 5.0 中,如果已有 package-lock 文件存在,若手动在 package.json 文件新增一条依赖,再执行 npm install, 新增的依赖并不会被安装到 node_modules...比如如果我们在公司内网环境下需通过代理才可访问 registry.npmjs.org 源,或需访问内网的 registry, 就可以在工作项目下新增 .npmrc 文件并提交代码库。

    6.6K160

    从这个API能看到整个前端的缩影

    大家好,我卡颂。 如果要从JS中找一个API作为整个前端的缩影,ESM规范中的import再合适不过了。 本文我们从这个API出发,来聊聊web的发展。...反观Node.js运行时,如果以包名的形式引入模块,比如: import moment from "moment"; 背后是一套指向node_modules,并最终指向npm库的机制。...npm是家私人公司,被github收购,而github被微软收购。 所以,如果某一天国内无法直接安装npm包,也不必惊讶,毕竟他的背后是一家私人公司。 与之相对,web的开放让他不会面临这种囧境。...所以,很自然的,库作者在面对模块规范的兼容性问题时,也想替用户做到最好。但是,这份努力也让代码行为变得更扑朔迷离。 比如:在ESM模块中是可以引入CJS模块的。...如果你也有这种迷茫,我建议你从ESM规范开始学起。 他就像一张地图,能够串联起前端的方方面面。

    44930

    如何搭建 Ghost 博客

    腾讯云现在有域名金秋盛惠,最低仅需1元起。也可以在购买云服务器时进行加购减免,比正常价格要便宜50%哦。 搭建博客环境 安装Node.js和Npm 更新本地包索引并安装zip和wget包。...安装Node.js后,运行以下命令检查安装的版本: node -v 输出应该类似于: v0.10.38 检查是否npm已安装: npm -v 它应该输出已安装的npm版本(如果已安装): 1.4.28...如果它输出了未安装npm的错误,请使用以下命令安装它: sudo apt-get install npm npm运行以下命令更新到2.5.0版: sudo npm install npm@2.5.0 -...g 检查npm已安装的版本: npm -v 输出应该是: 2.5.0 安装Ghost 接下来我们需要安装Ghost。...forever是一个节点模块,可用于在后台启动Ghost并监视以确保它保持运行状态。如果Ghost崩溃,永远会自动启动另一个Ghost实例。

    1.9K52

    Angular-Cli脚手架介绍、安装并搭建项目

    快速上手 在线演示 第一个本地实例 手动安装 其他 NG-ZORRO 致力于提供给程序员愉悦的开发体验。...NG-ZORRO StackBlitz 第一个本地实例# 实际项目开发中,你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。...注意: 如果启动后出现 Error: spawn xxxx ENOENT 那么可能就是你环境变量没配好,或者是你刚下载了node配置了环境而没重启电脑 360游览器好像不支持使用Angular 谷歌我试了是支持的...手动安装# 如果想自己维护工作流,理论上你可以利用 Angular 生态圈中的 各种脚手架进行开发,如果遇到问题可参考我们所使用的 配置 进行定制。...安装组件# $ npm install ng-zorro-antd --save 引入样式# 使用全部组件样式# 该配置将包含组件库的全部样式,如果只想使用某些组件请查看 使用特定组件样式 配置。

    2K30

    前端开发者狂喜!30K star开源组件库,界面美观度开发速度双碾压!

    核心功能 Layui 的组件库覆盖 布局、表单、表格、弹层、工具类 等六大模块,且每个组件均支持高度定制。...代码示例:复制// 成功提示(带图标)layer.msg('保存成功!'...文件上传:集成 Ajax 上传,支持多文件、进度条显示,后端仅需处理 multipart/form-data 请求8。...技术架构使用步骤npm 下载 npm i layui第三方 CDN 方式引入:以下均为知名第三方免费开放的公共资源 CDN,每期版本通过 NPM / GitHub 自动同步。如果你还在为寻找一款合适的前端 UI 组件库而苦恼,不妨试试 Layui,相信它会给你带来意想不到的惊喜!项目地址https://github.com/layui/layui

    9310

    为什么我不推荐你使用vue-cli创建脚手架?

    最近在知乎看到一个问题,原问题如下: “ 很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜...这个问题我之前在公司也曾想过,当初入门vue项目也是从一个 npm install vue-cli -g 的命令行开始的,觉得官方提供的vue-cli脚手架很友好,不用想vue+webpack的工作流怎么搭建...当然,以上是对于写业务代码的前端一线编码人员来说的,对于追求上进的你当然不满足于一直写业务代码,你也想知道一个项目在破土动工前,前端leader是怎么搭建一个前端项目的工作流的,如何去手动配置一个具体项目的...这些都是你提升自己内功的砝码,也是初级前端和中级前端的区别所在,初级前端只会在leader安排下的一个模块里写点业务代码而不用去管前端工程的问题,这些问题都被前端leader搞定了,你只需调用他写好的命令或者插件即可...中级前端或者更进阶者就有统筹全局的能力,类似于文章开头说的,能手动创建一个和公司项目需求深度定制的vue脚手架,而不再依赖于官方提供的vue-cli,一方面自己定制的脚手架哪出了问题自己心里清楚,从而也能培养自己前端架构的能力

    2.4K140
    领券