如何用npm创建工程

152 阅读2分钟

npm init

npm init 用于创建package.json,开发人员在此文件中填写模块信息,如name,version,依赖信息dependencies等。但是这种方法比较原始,实际开发过程中,我们会依赖脚手架为我们搭建比较完备的工程框架,比如我们开发react应用,可能会直接使用react提供的脚手架create-react-app为我们搭建工程框架。
下面介绍三种使用脚手架创建工程框架的npm命令。

npm <= 5.1.0

  1. 全局下载脚手架:
    npm install create-react-app -g
  2. 使用脚手架创建react工程:
    create-react-app my-react-app
    优点:
  • 该方法适用于任何npm版本;
  • 一次安装,不再需要重新安装脚手架; 缺点:
  • 脚手架容易过期;

npm >= 5.2.0

上面的两步模式简单易于理解,但是敲两条命令对于开发者来说还不够“偷懒”,于是npm引入了新命令npxnpx把上面的两条命令合二为一,其执行原理与上面基本相同,所以是一个语法糖。
npx create-react-app my-react-app
npx首先在后台暂时下载create-react-app模块,然后再执行create-react-app my-react-app .
优点:

  • 不需要全局安装;
  • 脚手架保持最新版本; 缺点:
  • 由于每次执行都需要后台下载最新脚手架,所以速度没有全局预先安装的快;

npm >= 6.1.0

上面我们说了npm init这个命令,比较原始,只能用于创建package.jsonnpm 6.1.0新增了<initializer>选项,用于脚手架创建工程。
npm init react-app my-react-app
注意,这里有个官方约定,initializer前附加create-即是脚手架名称。 本质上还是npx create-react-app my-react-app
不清楚npm的开发人员是如何思考的,为啥还要再增加一种创建工程的语法,按照官方说法,用init这个命令比较语义化,确实init就是初始化的意思,但是搞这么多命令,不累嘛,如果不是梳理下,头都搞大了,并且这个命令还有命名约定。
npm create
平时我们可能还会看到npm create这个命令用于初始化项目工程,头更大了。。。 不要慌,记住npm create就是npm init的别名,两者没有任何区别,按照官方说法,这是借鉴了yarn create的灵感。。。

总结

根据自己的npm版本,灵活选用上面说的初始化方法,没有哪个更好,用的开心就好😄