【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli

这篇具有很好参考价值的文章主要介绍了【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

希望我们每个人都能找到属于自己的花期,不急不躁,静等风来。

今天打算用 Docusaurus 开始搭建自己的知识库,之前早已有此想法,遗憾的是没有坚持下来。

这次借助这个机会,也计划将自己【每天学习一点点】系列整理在自己的知识库中,方便大家查找。

在使用脚手架命令搭建知识库的时候,看到了一堆提示,以及交互式的功能,于是好奇这个是如何实现的呢?(毕竟程序都是人写的,我们可以学习一下实现方式,有朝一日在搭建自己好用好玩的工具库时,可能会有很多参考的意义)

从输入这npx create-docusaurus@latest yongzl-knowledge classic这条命令到项目模板下载下来到本地,中间发生了什么?

【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli,07 每天一个知识点,npm,vue.js,前端框架,前端

一探究竟

npx create-docusaurus@latest yongzl-knowledges classic

1. 从vue开始

由于平时用的最多的还是创建vue项目,而创建vue项目常用的脚手架命令如下(vue官方推荐使用如下命令创建一个vue项目)

工具链 | Vue.js (vuejs.org)

npm create vue@latest

2. npm create 是什么?

结论:npm create 等同于 npm init

输入 npm create --help 可以看到,npm create其实就是npm init的一个别名,于是试了一下创建vue-vite项目的npm create vue改为npm init vue

输入npm init --help 可以看到相同的帮助手册

# npm create vue

D:\99_myprojects>npm create --help
Create a package.json file

Usage:
npm init <package-spec> (same as `npx <package-spec>`)
npm init <@scope> (same as `npx <@scope>/create`)

Options:
[--init-author-name <name>] [--init-author-url <url>] [--init-license <license>]
[--init-module <module>] [--init-version <version>] [-y|--yes] [-f|--force]
[--scope <@scope>]
[-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
[-ws|--workspaces] [--no-workspaces-update] [--include-workspace-root]

aliases: create, innit   // 关键在这里,npm init的别名,包含create,可能不同的开发者不同的习惯,所以用npm create和npm init都一样

Run "npm help init" for more info

D:\99_myprojects>

【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli,07 每天一个知识点,npm,vue.js,前端框架,前端

【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli,07 每天一个知识点,npm,vue.js,前端框架,前端

又由于 npm init (same as `npx `),所以不妨试一试 npx create-vue,可以看到结果是一样的

【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli,07 每天一个知识点,npm,vue.js,前端框架,前端

3. npm init如何使用?

npm-init | npm Docs (npmjs.com)

3.1 npm init / npm init -y 创建一个package.json文件

If the initializer is omitted (by just calling npm init), init will fall back to legacy init behavior. It will ask you a bunch of questions, and then write a package.json for you. It will attempt to make reasonable guesses based on existing fields, dependencies, and options selected. It is strictly additive, so it will keep any fields and values that were already set. You can also use -y/ --yes to skip the questionnaire altogether. If you pass --scope, it will create a scoped package.

3.2 npm init ⭐⭐⭐

npm init  can be used to set up a new or existing npm package.

initializer in this case is an npm package named create-, which will be installed by npm-exec, and then have its main bin executed -- presumably creating or updating package.json and running any other initialization-related operations.

Note: if a user already has the create- package globally installed, that will be what npm init uses. If you want npm to use the latest version, or another specific version you must specify it:

 - npm init foo@latest # fetches and runs the latest create-foo from the registry

 - npm init foo@1.2.3 # runs create-foo@1.2.3 specifically

总结一句话:

npm create vue === npm init vue === npm exec create-vue

而create-initializer对应的npm package包create-vue可以从上面的图里发现,已经被安装到我们本地了(create-vue@3.9.2)

【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli,07 每天一个知识点,npm,vue.js,前端框架,前端

4. npm exec

If the package has a single entry in its bin field in package.json, or if all entries are aliases of the same command, then that command will be used.

从npm的文档中可以看到,npm exec是去找package.json中的bin配置项,找到对应的入口文件并执行

从create-vue源代码中可以看到,对应的入口文件是outfile.cjs,于是执行该文件

【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli,07 每天一个知识点,npm,vue.js,前端框架,前端

5. npx

参考:npx | npm Docs (npmjs.com)文章来源地址https://www.toymoban.com/news/detail-835670.html

到了这里,关于【每天学习一点点 day04】工程化 npm create 脚手架 create-vue, vue-cli 执行原理① - npm cli的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一点点安全资料:数通知识扩展

    华为防火墙 介绍 华为防火墙是华为提供的一种网络安全产品,设计用来保护企业网络不受未经授权访问和各种网络威胁的侵害。华为防火墙采用先进的技术,以确保网络安全,同时提供高性能的数据处理能力。下面我们就来详细了解一下华为防火墙的特点、工作原理以及配

    2024年04月10日
    浏览(28)
  • 一点点安全资料:网络安全扩展

    简介 SSL(Secure Sockets Layer)和TLS(Transport Layer Security)是加密协议,设计用来提供网络通信的安全性和数据完整性。尽管TLS是SSL的后继者,但两者的核心目标相同:保护网络通信免受窃听和篡改,同时验证通信双方的身份。这些协议主要用在应用层协议(如HTTP)之上,形成如

    2024年04月08日
    浏览(66)
  • Lambda 开发效率提升不止一点点

    1、Lambda表达式可以被认为是函数式接口的实例。使用Lambda表达式时,需要确定要使用哪种函数式接口,并根据该函数式接口的参数列表和返回类型定义Lambda表达式。    2、作为方法参数:  Lambda表达式可以作为方法参数传递,从而简化代码并使代码更易读。    3.、作为返回

    2024年02月05日
    浏览(30)
  • pygame里实现导弹追踪效果,同时对python的指针机制有一点点思考

           最近,儿子一直缠着让我把之前给他编写的游戏重做一下,要加一些功能.但是因为之前写代码的时候刚学会python,当时的想法就是能跑就行,现在回头看来,代码的可维护性几乎为零.所以没办法只能冲头再来,重构了几乎所有代码.在编写的时候遇到了一个有意思的问题,儿子

    2024年01月21日
    浏览(147)
  • TypeError: Cannot read properties of undefined (reading ‘dispatch‘)以及一点点的nprogress的错误

    在开发项目中遇到这个bug,记录一下解决办法 在入口文件main.js看注册的store有无大小写错误 版本太高 vue2安装3版本的vuex,默认安装的4版本给vue3用 nprogress 在查看完代码无错误后去翻了一下nprogress的使用教程 发现进度条关闭的方法居然是done()不是end()!!!

    2024年02月14日
    浏览(31)
  • Day14-1-NodeJS后端工程化

    前端 前端:指运用html+css+JavaScript等技术实现用户体验良好的web应用界面 工作 根据设计原稿高保真实现页面及交互 和后端人员协同完成项目的接口设计与编写文档。 和测试人员协同工作,完成bug的修复和跟踪 根据产品需求完成对应的功能(nodejs) 技术栈 基础:html+css+Jav

    2024年02月12日
    浏览(24)
  • 【每天学习一点新知识】nmap端口扫描

    open(开放的) 应用程序正在该端口接收TCP 连接或者UDP报文。发现这一点常常是端口扫描 的主要目标。安全意识强的人们知道每个开放的端口 都是攻击的入口。攻击者或者入侵测试者想要发现开放的端口。 而管理员则试图关闭它们或者用防火墙保护它们以免妨碍了合法用户。

    2024年02月06日
    浏览(35)
  • 前端Vue入门-day03-用Vue实现工程化、组件化开发

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 生命周期 Vue 生命周期 和 生命周期的四个阶段  Vue 生命周期函数(钩子函数) 案例-create的应用 案例-mounted的应用 工程化开发 脚手架 Vue CLI 开发 Vue 的两种方式 基本介

    2024年02月15日
    浏览(36)
  • 【每天学习一点新知识】中间人攻击是什么

    目录 中间人攻击介绍  中间人攻击原理 1. ARP欺骗 2. DNS欺骗 防御方法   中间人攻击(man-in-the-middle attack, abbreviated to MITM),顾名思义,就是攻击者躲在通信双方之间,窃听甚至篡改通信信息,而这个攻击是不可见的,通信双方并不知道消息已经被截获甚至篡改了。 这个图片很

    2024年02月09日
    浏览(29)
  • 【每天学习一点新知识】文件包含常用之伪协议

    以下举例一些比较常用的伪协议及用法 可以用于执行php代码,通过post请求提交我们的代码 这里给一个攻防世界 Web_php_include 的例子 $page=str_replace(\\\"php://\\\", \\\"\\\", $page);这里把page参数里的php://替换成了空格,我们需要绕过它 用php://input执行ls命令查看文件,php用大小写来绕过 结果如

    2024年02月13日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包