npm · Web前端工程化

[TOC] # npm script npm script 和 webpack 就可以做很多事情了，还可以自己写npm script脚本，来完成自己想做的事情。 ## 参考 [ 我为何放弃Gulp与Grunt，转投npm scripts（上）](http://blog.csdn.net/ricohzhanglong/article/details/50726141) http://www.cnblogs.com/zldream1106/p/5204599.html [使用npm scripts替代gulp](https://aotu.io/notes/2016/02/26/use-npm-script-instead-of-gulp/) [npm Scripts使用教程【译】](http://www.cnblogs.com/zldream1106/p/why-npm-scripts.html) > https://docs.npmjs.com/misc/scripts # set-script 示例： ```shell npm set-script start "http-server ." ``` `package.json`: ```json { "name": "my-project", "scripts": { "start": "http-server .", "test": "some existing value" } } ``` > [npm-set-script](https://docs.npmjs.com/cli/v8/commands/npm-set-script) # npm-dist-tag > version 一旦发布，是不可变的； > 而 tag 更像一个渠道，只要用户选择了这个渠道，就可以一直更新这个渠道的最新版。也因此，version 和 tag 是相互独立的。 ## 切换tag 回到我们的问题，如果不小心把`1.0.0-alpha.1`直接`npm publish`了，我们该怎么办？ ## 查看当前的tag和对应的version。通过`npm dist-tag ls`，我们可以得到这样的结果： ~~~css latest: 1.0.0 next: 1.0.0-alpha.0 ~~~ 如果我们不小心发布了一个`1.0.0-alpha.1`到`latest`，那么我们会得到： ~~~css latest: 1.0.0-alpha.1 next: 1.0.0-alpha.0 ~~~ 这个时候我们只要切一下 tag 就可以挽回局面了。 ## 查看发布过的所有版本号通过`npm v my-package versions`可以得到一个数组： ~~~json [ '0.1.0', '1.0.0', '1.0.0-alpha.0', '1.0.0-alpha.1' ] ~~~ ## 设置 tag，对应到版本 version ``` npm dist-tag add my-package@version tag ``` 如： 1. 把原来的`1.0.0`设置成最新的正式版 ```sh npm dist-tag add my-package@1.0.0 latest ``` 2. 把`1.0.0-alpha.1`更新到最新的测试版 ```sh npm dist-tag add my-package@1.0.0-alpha.1 next ``` 再也不用担心搞出线上故障了~ > [npm-dist-tag](https://docs.npmjs.com/cli/v8/commands/npm-dist-tag) > https://docs.npmjs.com/adding-dist-tags-to-packages # `npm set` 设置 `package.json` 默认值当初始化`package.json`可以执行 ``` npm init -y ``` 如果需要设置默认值： ``` npm set init.license "MIT" npm set init.author.email "koopking@gmail.com" npm set init.author.name "Yun.kou" ``` 再来一遍 ``` rm package.json npm init -y ``` 如果你想看默认值和编辑可以查看`~/.npmrc` ``` vim ~/.npmrc ``` # 更新 npm 在Windows上，更新 npm 比较麻烦。Windows 上的问题是 npm是与 node.js一起安装的，直接使用： ``` $ npm install --global npm@latest ``` 下载的 npm 的新版本总是会被node 本身的版本所掩盖。这是因为您的环境变量 `PATH` 中的条目的顺序导致的问题。简单解决方案：npm-windows-upgrade (https://github.com/felixrieseberg/npm-windows-upgrade) 使用管理员权限运行以下命令： ``` $ npm install -g npm-windows-upgrade $ npm-windows-upgrade ``` check out the official release notes: https:// github.com/npm/cli/ # `.npmrc` file There are a few different points here: 1. Where is the`.npmrc`file created. 2. How can you download private packages Running`npm config ls -l`will show you all the implicit settings for npm, including what it thinks is the right place to put the`.npmrc`. But if you have never logged in (using`npm login`) it will be empty. Simply log in to create it. Another thing is #2. You can actually do that by putting a`.npmrc`file in the NPM package's root. It will then be used by NPM when authenticating. It also supports variable interpolation from your shell so you could do stuff like this: ~~~ ; Get the auth token to use for fetching private packages from our private scope ; see http://blog.npmjs.org/post/118393368555/deploying-with-npm-private-modules ; and also https://docs.npmjs.com/files/npmrc //registry.npmjs.org/:_authToken=${NPM_TOKEN} ~~~ **Pointers** * [http://blog.npmjs.org/post/118393368555/deploying-with-npm-private-modules](http://blog.npmjs.org/post/118393368555/deploying-with-npm-private-modules) * [https://docs.npmjs.com/files/npmrc](https://docs.npmjs.com/files/npmrc) # [`node-gyp`](https://github.com/TooTallNate/node-gyp) need Visual C++ runtime libraries The way to resolve this is to install Visual Studio. At the time of this writing (Feb 2015) the compilation works fine with [Visual Studio 2013 Update 4](http://www.visualstudio.com/en-us/news/vs2013-update4-rc-vs.aspx). You can then tell npm which version of Visual Studio you are using by the following command: ```shell $ npm install -g browser-sync --msvs_version=2013 ``` After installation of Visual Studio npm should not throw errors any longer, but only issue warnings. As far as we can tell, they do not impact Browsersync. **正确姿势** 在项目目录执行， macOS 系统直接运行下面的命令即可： ~~~ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass ~~~ windows 下的可以拆分成两个命令 ~~~ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass ~~~ # node-sass 安装失败解决办法 https://segmentfault.com/a/1190000010984731 [node-sass 安装失败 win32-x64-57_binding.node](https://www.jianshu.com/p/145cc862ceec) 注意查看 [win32-x64-59_binding.node](https://github.com/sass/node-sass/releases/) 是否支持你的node版本 ## 设置 node-sass 路径安装 node-sass 的时候总是会各种不成功，~翻墙，解决一切问题~ **正确姿势** 在项目目录执行， macOS 系统直接运行下面的命令即可： ~~~ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass ~~~ windows 下的可以拆分成两个命令 ~~~ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass ~~~ 第一种：直接右键我的电脑--》属性--》高级系统设置--》环境变量--》添加。第二种：set XXX=文件路经 --》`set SASS_BINARY_PATH=D:\Applications\win32-x64-64_binding.node` 查看环境是否合适：`echo %SASS_BINARY_PATH%` 第三种：我们可以在`.npmrc`中直接设置它们的镜像地址，添加`node-sass`的镜像地址： ~~~ # .npmrc SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass ~~~ ## 然后安装 node-sass 模块 ``` npm rebuild node-sass 或者 npm i node-sass -D --verbose ```