npm
或 yarn
来构建项目。运行npm init
或npx create- response -app
等命令几乎构建JS项目的首选方式,无论是为客户端或服务器端,还是桌面应用程序。npm
不仅仅是初始化项目或安装包。在本文中,我们将会介绍 npm
的13个技巧来最大限度地利用npm
:从简单的快捷方式到自定义脚本。npm
,从长远来看,即使节省少量的时间也会产生显著的影响。这些技巧是针对初学者和中级开发人员的,但是即使您是一位经验丰富的开发人员,我希望你仍然能够找到一到两个你以前没有遇到过的特性。学习基本快捷方式
设置默认npm init属性
让脚本跨平台兼容
并行运行脚本
在不同的目录中运行脚本
延迟运行脚本直到端口准备就绪
列出并选择可用脚本
运行前后脚本
控制应用程序版本
从命令行编辑package.json
自动设置和打开你的github库
自定义npm init脚本
使用自定义npm init脚本将你的第一个 Commit 提交到 GitHub
安装 — 常规:npm install,简写:npm i。
测试 — 常规:npm test,简写:npm t。
帮助 — 常规:npm --help,简写:npm -h。
全局标志 — 常规: --global,简写:-g。
保存为开发依赖 - 常规: - save-dev,简写:-D。
npm init 默认值 - 常规:npm init --yes 或 npm init --force,简写:npm init -y 或 npm init -f
-save
或-S
来保存包,但现在这是个已经是默认值。要安装一个包而不保存它,可以使用 ——no-save
标志。安装包信息将加入到optionalDependencies(可选阶段的依赖)- 常规:--save-optional, 简写:-O。
精确安装指定模块版本 - 常规:--save-optional, 简写:-O。
--save-bundle
或-B
将它们捆绑在一起,并使用npm pack
获得捆绑包。.
符号通常用于表示应用程序的根目录,npm术语中的应用程序入口点,即package.json
中指定为“main
”的值{
'main': 'index.js'
}
npx create-react-app .
这样的命令。因此,可以运行npx create-react-app .
,而不是使用 npx create-react-app my-app
创建一个新的my-app
目录。npm init
开始一个新项目时,你可能会发现自己一次又一次地输入配置细节。假如,你可能是项目的主要负责人。有时为了节省时间,可以为这些字段设置默认值,如下所示:npm config set init.author.name 'Joe Bloggs'
npm config set init.author.email 'JoebLoggs@gmail.com'
npm config set init.author.url 'Joebloggs.com'
npm config set init.license 'MIT'
npm config edit
查看配置文件信息。当然也j可以通过直接在打开的配置文件编辑信息。 如果要编辑全局npm
设置,使用npm config edit -g
。echo '' > $(npm config get userconfig)
npm config edit
echo '' > $(npm config get globalconfig)
npm config --global edit
cross-env
。使用npm i -D cross-env
将其作为开发依赖项安装。然后在任何环境变量之前包括关键字cross-env
,就像这样:{
'scripts': {
'build': 'cross-env NODE_ENV=production webpack --config build/wepack.config.js'
}
}
rimraf 可以安装在全球运行跨平台脚本
ShellJS 是Unix shell命令在Node.js API上的可移植实现。
&&
来依次运行两个或多个进程。但是并行运行脚本呢?为此,我们可以从各种npm包中进行选择。concurrent 和 npm-run-all 是最流行的解决方案。{
'start': 'concurrently \'command1 arg\' \'command2 arg\''
}
package.json
文件的应用程序。 从根目录访问这些脚本会很方便,而不是每次要运行脚本时导航到不同的文件夹,有两种方法可以执行此操作。cd folder && npm start && cd ..
--prefix
标志指定路径:npm start --prefix path/to/your/folder
npm start
。'start': 'concurrently \'(npm start --prefix client)\' \'(npm start --prefix server)\'',
wait-on
节点模块提供了一种方便的方法来确保进程只在某些进程就绪时发生:在我们的例子中,我们有一个特定的端口。dev
脚本。 同时使用,脚本并行加载表示层和Electron窗口。 但是,使用wait-on
,只有在 http://localhost:3000
启动好,才会打开Electron窗口。'dev': 'concurrently \'cross-env BROWSER=none npm run start\' \'wait-on http://localhost:3000 && electron .\'',
BROWSER=none
来禁用此行为。package.json
文件中可用的脚本很简单:只需转到项目的根目录并在终端中输入npm run
。npm i -g ntl
ntl
命令,可以获得一个可用脚本列表,并可以选择其中一个运行。prebuild
和postbuild
这样的脚本,它们允许你定义在构建脚本之前或之后运行的代码。但事实上,pre
和post
可以在任何脚本之前添加,包括自定义脚本。pre
和post
脚本。npm version加上
major,
minor或
patch`:// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0
{
'predeploy': 'npm version patch'
}
package.json
是一个常规的json
文件,因此可以使用工具库json从命令行进行编辑。 这在修改package.json
提供另外一种新的方式,允许w你q创建超出默认值的快捷方式。 全局安装:npm install -g json
-I
进行就地编辑。 例如,要添加值为“bar”的新脚本“foo”,这样写:json -I -f package.json -e 'this.scripts.foo='bar''
package.json
文件中有“repository”,则可以通过输入 npm repo
在默认浏览器中打开它。git
,那您可以使用这个命令找到你的连接存储库git config --get remote.origin.url
json
模块,可以使用下面的脚本自动将正确的存储库添加到 package.json
json -I -f package.json -e 'this.repository=\'$(git config --get remote.origin.url)\''
npm init
脚本npm init
脚本,它接受GitHub存储库URL并自动推送我们的第一个提交。在本技巧中,我们将讨论如何创建自定义npm init
脚本。在下一个(也是最后一个)技巧中,我们将合并git。.npm-init.js
文件来编辑npm init
脚本。(在Windows上,通常是 c/Users/<用户名>
,在 Mac 上,它是/Users/<用户名>
)。.nmm-init.js
文件。为了确保npm init
被指向正确的文件,可以运行:npm config set init-module ~\.npm-init.js
git
之前,这里有一个简单的.npm-init.js
文件,它模拟了默认npm init
的问题。module.exports = {
name: prompt('package name', basename || package.name),
version: prompt('version', '0.0.0'),
decription: prompt('description', ''),
main: prompt('entry point', 'index.js'),
repository: prompt('git repository', ''),
keywords: prompt(function (s) { return s.split(/\s+/) }),
author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),
license: prompt('license', 'ISC')
}
nameInPackage
模式:prompt('nameInPrompt','defaultValue')
。要在缺省情况下设置值而不带问题,只需删除prompt
方法。.npm-init.js
。.npm-init.js
文件中,需要一种方法来控制命令行。为此,我们可以使用child_process
模块。在文件的顶部引入它,因为我们只需要execSync
函数,所以可以使用析构赋值语法自己获取它:const { execSync } = require('child_process');
function run(func) {
console.log(execSync(func).toString())
}
README.md
文件,并启动我们的第一次提交。repository: prompt('github repository url', '', function (url) {
if (url) {
run('touch README.md');
run('git init');
run('git add README.md');
run('git commit -m 'first commit'');
run(`git remote add origin ${url}`);
run('git push -u origin master');
}
return url;
})
.npm-init.js
文件大概如下:const { execSync } = require('child_process');
function run(func) {
console.log(execSync(func).toString())
}
module.exports = {
name: prompt('package name', basename || package.name),
version: prompt('version', '0.0.0'),
decription: prompt('description', ''),
main: prompt('entry point', 'index.js'),
keywords: prompt(function (s) { return s.split(/\s+/) }),
author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),
license: prompt('license', 'ISC'),
repository: prompt('github repository url', '', function (url) {
if (url) {
run('touch README.md');
run('git init');
run('git add README.md');
run('git commit -m 'first commit'');
run(`git remote add origin ${url}`);
run('git push -u origin master');
}
return url;
}),
}
{
'name': 'Custom npm init',
'version': '0.0.0',
'decription': 'A test project, to demonstrate a custom npm init script.',
'main': 'index.js',
'keywords': [],
'author': 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)',
'license': 'ISC',
'repository': {
'type': 'git',
'url': 'git+https://github.com/JoeBloggs/custom.git'
},
'bugs': {
'url': 'https://github.com/JoeBloggs/custom/issues'
},
'homepage': 'https://github.com/JoeBloggs/custom#readme'
}
package.json
,或编写自定义版本的npm init
。联系客服