parcel-bundler安装 - 前端构建工具

简介: parcel-bundler安装 - 前端构建工具

一、Window系统配置:


1、安装nodejs:https://nodejs.org/zh-cn/download/releases/

2、打开命令窗口,进入当前工程目录

3、npm配置淘宝镜像:npm config set registry http://registry.npm.taobao.org/

4、npm安装parcel-bundler:npm install -g parcel-bundler

5、运行工程:npm run dev


二、MacOS配置


1、环境配置

打开命令窗口(shell)


2、插件安装

2.1、brew安装

1、检查安装

检查Homebrew是否安装


brew -v 

如果已经安装,下一步流程跳过。


2、brew安装

/bin/bash -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install.sh)"

如果有如下提示:brew只是浅拷贝,为更新,建议执行如下代码,并且这个命令行可能需要耗费一些时间。


homebrew-core is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
This command may take a few minutes to run due to the large size of the repository.

那么直接根据要求执行命令,等几分钟就好了。然后根据要求更新brew:


brew update

如果有提示升级,可以升级:


brew upgrade

如还有其他问题,自行度娘…


2.2、nodejs 安装

检查node是否安装


node -v

如果已经安装会提示,当前安装的版本


如果没有安装,执行如下命令


brew install node

2.3、npm安装

pm是基于nodejs的包管理器

为保证是否安装,可以检查其版本号:


npm -v

如果有安装,直接打印其版本号。


还是执行上面命令:


brew install node

这里最重要的是查询切换淘宝镜像地址,加快加载速度,这里先查看本地镜像地址:


npm get registry 

如果不是需要的请切换:


// 切淘宝镜像
npm config set registry http://registry.npm.taobao.org/
// 切默认官方镜像地址
npm config set registry https://registry.npmjs.org/


2.4、parcel-bundler安装 —— 前端构建工具

npm install -g parcel-bundler

3、运行

在命令窗口,cd到工程项目中,运行工程:

npm run dev
相关文章
|
3月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
140 3
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
4月前
|
前端开发 关系型数据库 MySQL
【前端学java】MySQL数据库的本地安装
【8月更文挑战第12天】MySQL数据库的本地安装
48 3
|
11天前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
36 8
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
127 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
18天前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
|
25天前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
53 4
|
23天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
28 2
|
2月前
|
JavaScript 前端开发 Docker
前端的全栈之路Meteor篇(一):开发环境的搭建 -全局安装或使用容器镜像
本文介绍了如何搭建 Meteor 开发环境,包括全局安装 Meteor 工具和使用 Docker 镜像两种方法,以及创建和运行一个简单的 Meteor 项目的基本步骤。 Meteor 是一个全栈 JavaScript 框架,适用于构建实时 Web 应用程序。文章还提供了遇到问题时的解决建议和调试技巧。
|
2月前
|
自然语言处理 前端开发 JavaScript
推荐 10 个前端开发会用到的工具网站
本文介绍了多个前端开发工具,包括 Web Design Museum、Landing Page、Google Fonts、Lorem Ipsum、Animista、Blobmaker、Spline、CodeToGo、UnusedCSS 和 Responsively,帮助开发者提高效率和项目质量。这些工具涵盖了设计、动画、代码片段管理、响应式测试等多个方面。
94 0
推荐 10 个前端开发会用到的工具网站

热门文章

最新文章