npm包发布

npm 知乎

【手把手教程】从零开始写个webpack小工具之测试代码报警器

在npm官网注册个账号
npm adduser
npm publish
最终发布在npm上的包test-code-checker
https://www.npmjs.com/package/test-code-checker
// 进入本地node看全局安装组件
cd ~/.nvm/versions/node/v6.9.4/lib/node_modules
下面自己做一个npm包发布
cd ~/study/test/npm/nvm/ct-js-checker
npm init 
// index.js
module.exports = function (content, map, meta) {
    this.async()(null, content, map, meta)
}
//切换到npmjs注册  淘宝镜像会导致不成功
npm config set registry https://registry.npmjs.org/
// npm config set registry http://registry.npm.taobao.org/
// npm install -g cnpm --registry=https://registry.npm.taobao.org
// 添加我的npm账户名来划分一个作用域,被划了作用域的包默认是私有的，所以要通过--access=public 让它变为公有的包：
// "name": "@niujianyin/ct-js-checker",
npm publish --access=public
// + @niujianyin/ct-js-checker@1.0.0
测试
cd ~/study/test/npm/nvm
npm install -g @vue/cli
vue init webpack test01
cd test01
npm install test-code-checker --save-dev
在webpack.base.conf.js中 > module > rules >
uese: [{
    loader: 'test-code-checker'
}]
//注意：loader的顺序很关键，因为loader是逆向链式的，也就是说后面的loader的结果会作为前面loader的源content传入，那么显然的，我们这个loader肯定是希望拿到第一手的vue和js文件，而不是处理过以后的文件，否则// test这种注释型标志就可能被其他的loader过滤掉了。

从这篇文章延伸出来的学习：

1.在测试时发现vue有3.0.0-beta.6新版本了，安装时提示node版本不够。用nvm解决这个问题。

使用nvm利器，管理node版本

1.可安装多版本的node。
2.灵活切换当前的node版本。
3.以沙箱方式全局安装第三方组件到对应版本的node中。
4.通过.vnmrc文件，方便灵活地指定各应用系统所需的node版本进行运行。

nvm install stable //安装最新稳定版 v9.8.0
nvm current //查看当前版本
nvm use 6 //切换到v6.9.4 
nvm ls //显示所有安装的版本
npm install -g @vue/cli
// 在nvm管理下，以沙箱的方式，全局组件会装到.nvm目录的当前版本node下，也就是装在nvm这个沙箱里，跟在指定版本的node下，当前有什么版本的node，就有对应的全局组件。这是nvm强大的地方，在多运行环境的管理和切换极为好用。
// 以下是新学重点：使用.nvmrc文件运行
cd ~/study/test/npm/nvm  //在这里测试
echo 'console.log(process.versions);' > app.js //新建app.js 把当前运行的node版本输出到控制台,这里延伸出shell命令
echo '9' > .nvmrc 
//新建.nvmrc文件指定~/study/test/npm/nvm下的所有运行在node v9.8.0 之下
nvm run app.js
//可以看到运行demo的node版本取决于.nvmrc中写的版本。
//通过.nvmrc作为运行版本配置，用nvm run命令进行启动的方式可以方便的完成同一个服务器运行多个不同版本的应用系统，非常方便灵活。

Shell echo命令

2.node版本解决了，安装@vue/cli发现npm包规则变为使用作用域，同时发现npm 5.x以后出现了package-lock.json文件，直接锁定版本号。

Vue CLI 3.x 简单体验

命名方式已经改为npm推荐的新的包名规则，使用作用域。
npm install -g @vue/cli 
// 使用作用域！
{
    "name": "json-stream"
}
修改为：
{
    "name": "@niujianyin/json-stream"
}
然后我要发布这个包。被划了作用域的包默认是私有的，所以要通过--access=public 让它变为公有的包：
> npm publish --access=public
+ @niujianyin/json-stream@1.0.0

NPM 使用介绍

使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。
语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。
如果只是修复bug，需要更新Z位。
如果是新增了功能，但是向下兼容，需要更新Y位。
如果有大变动，向下不兼容，需要更新X位。
版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。

The npm Blog——新的包名规则

validate-npm-package-name

npm 5 package-lock.json 坑坑坑！！

3.npm同类产品Yarn

Yarn 是一个依赖管理工具。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。

sudo xcodebuild -license accept
// 如果您使用 nvm 或类似的东西，您应该排除安装 Node.js 以便使用 nvm 的 Node.js 版本。
brew install yarn --without-node

mac安装神器brew

更换Homebrew更新源

Yarn使用

yarn init
yarn add [package]@[version]
yarn upgrade [package]@[version]
yarn remove [package]
yarn //安装项目的全部依赖

当执行npm publish 时，出现unauthorized 和 is not in the npm registry

// 您首先执行下 npm adduser ，输入您相应的 Username 、 Password 、 Email: (this IS public) ，关键的一步来了!
// Logged in as 您的Username on https://registry.npmjs.org/.
// 如果 on 后面不是 https://registry.npmjs.org/ ，而是其他的镜像，比如我们大家常见的淘宝镜像：
// http://registry.npm.taobao.org/
// 那么您首先替换成原来的，替换成原来执行如下命令：
npm config set registry https://registry.npmjs.org/
//最后，替换完毕再执行 npm adduser 、 npm publish ，这样应该就ok了！

思否开发者技术社区这个社区技术贴挺好的

从零开始教你写一个NPM包 这个比较重要

取的html字符串我们需要解析，cheerio就是首选

const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')
$('h2.title').text('Hello there!')
$('h2').addClass('welcome')
$.html()
//=> <h2 class="title welcome">Hello there!</h2>

前端代码调试：Webstorm调试js

axios 使用post方式传递参数，后端接受不到

//params是添加到url的请求字符串中的，用于get请求。
//而data是添加到请求体（body）中的， 用于post请求。
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;
this.$axios({
    method: 'post',
    url:url,
    data:params
}).then((res)=>{
});
// post 传递参数需要from-data形式（a=b&c=d），不是json格式
// Alternatively, you can encode data using the qs library:
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
// Node.js
//In node.js, you can use the querystring module as follows:
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

//Promise 方案的死穴—— 参数传递太麻烦了;所以用async/await

理解 JavaScript 的 async/await

async 函数的含义和用法

浅析Promise用法

Javascript异步编程的4种方法

解决苹果Mac商店出现无法连接到App Store的问题

module.exports与exports，export与export default之间的关系和区别

聊聊 package.json 文件中的 module 字段

pkg.module 字段要指向的应该是一个基于 ES6 模块规范的使用ES5语法书写的模块。
// 随着 ES6 规范的出现，这个问题得到了解决。ES6 定义了一套基于 import、export 操作符的模块规范。它与 CommonJS 规范最大的区别在 ES6 中的 import 和 export 都是静态的。静态意味着一个模块要暴露或引入的所有方法在编译阶段就全部确定了，之后不能再改变。这样做的好处就是打包工具在打包阶段就可以分析出代码中用到了某个模块中的哪几个方法。其它没有用到的方法就可以从最终的 bundle 文件中剔除掉。这样既可以减少 bundle 文件的大小，又可以提高脚本的执行速度。这个机制就叫做 Tree Shaking。
// 配合 uglifyjs-webpack-plugin，就可以很轻松的把它从最终的 bundle 文件中移除。

解析Vue2 dist 目录下各个文件的区别

按照构建方式分, 可以分成 完整构建(包含独立构建和运行时构建) 和 运行时构建(可不可以用template选项, 和文件大一点,小一点)
按照规范分, 可以分成 UMD, CommonJS 和 ES Module
// 需要配置别名 'vue$': 'vue/dist/vue.common.js'
// 完整构建 可以用template
vue.common.js // 基于 CommonJS 的完整构建 module.exports = Vue;
vue.esm.js // 基于 ES Module 的完整构建 export default Vue;
vue.js // 基于 UMD 的完整构建 return Vue;
vue.min.js // 基于 UMD 的完整构建
// 运行时构建 只能用render选项
vue.runtime.common.js
vue.runtime.esm.js
vue.runtime.js
vue.runtime.min.js
//UMD  1.module.exports(CMD)  2.define(AMD require) 3.window.Vue
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Vue = factory());
}(this, (function () { 'use strict';
    return Vue;
})

使用Vue-cli搭建多页面应用时对项目结构和配置的调整

vue-dachunchun-peizhi

vue-cli#2.0 webpack 配置分析

vue-cli版本更新（2.9.1）问题记录