@codeniu/vue-divider
Version:
This is divider vue component.
186 lines (125 loc) • 4.38 kB
Markdown
# 如何发布你的第一个 npm 包？
## npm 账号
### 注册
你需要一个 npm 账号, 在这[注册](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fsignup)。
### 登录
打开终端后输入：
npm login
根据提示输入**username**、**password** 和 **email**。
注意如果你使设置了其他的 npm 源，你需要将其更改为 npm 本身的源。此外发布也需要切换到 npm 默认的源。
查看源：
npm config get registry
设置源：
npm config set registry http://registry.npmjs.org
## 创建项目
`mkdir vue-divider`
### 初始化
` npm init `
### webpack 配置
webpack.config.js
```js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vue-divider.min.js',
library: 'NiuDivider',
libraryTarget: 'umd',
umdNamedDefine: true,
},
}
```
## 发布
在终端中输入
npm publish --access=public
\--access=public: Scoped packages 会被自动发布为私有包, 这个参数告诉 npm 我们想让每个人都可以使用这个模块。
发布成功后你会收到一封邮件，像这样的。
> 看到没，npm 爱你呦
好了至此你的第一个npm包就已经发布了
## webpack 之 module
### vue-loader
```shell
yarn add vue-loader -D
```
它是基于 `webpack` 的一个的 `loader` 插件，解析和转换 `.vue` 文件，提取出其中的逻辑代 码 `script`、样式代码 `style`、以及 `HTML` 模版 `template`，再分别把它们交给对应的 `loader` 去处理如 `style-loader` 、 `less-loader` 等等，核心的作用，就是 `提取` 。
安装完包后配置 webpack.config.js 文件：
```js
module:{
rules:[
{
test: /\.vue$/,
use: ['vue-loader'],
},
]
}
```
### vue-template-compiler
```js
// vue 2.x
yarn add vue-template-compiler -D
//vue 3.x
yarn add @vue/compiler-sfc -D
```
将 .vue 文件的 template 编译成 AST （抽象语法树）。
`Vue 2.x` 时代，需要 `vue-template-compiler` 插件处理， `Vue 3.x` 则变成 `@vue/compiler-sfc`。
### bable-loader
```js
yarn add @babel/core @babel/preset-env bable-loader -D
```
* @babel/core： `babel` 的核心库。
* @babel/preset-env：它取代了 `es2015 es2016 es2017` ，通过配置浏览器版本的形式，将编译的主动权，交给了插件。
* babel-loader： `webpack` 的 `loader` 插件，用于编译代码，转化成浏览器读得懂的代码。
安装完上述插件之后，我们在 `webpack.config.js` 下添加如下代码
```js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // 不编译node_modules下的文件
loader: 'babel-loader'
},
]
}
```
编译的时候，需要读取配置，最新的 `babel` 配置文件需要在根目录下添加 `babel.config.js` 文件：
```js
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
// browsers: ["last 2 versions"], // 最近 2 个版本的浏览器
browsers: ["last 1 chrome version"],
},
},
],
],
};
```
### cross-env
配置多环境
安装 cross-env
```js
yarn add cross-env -D
```
在 package.json 添加脚本
```js
// 旧
"scripts": {
"dev": "webpack serve --progress --config ./webpack.config.js",
"build": "webpack --config ./webpack.config.js"
},
// 新
"scripts": {
"dev": "cross-env NODE_ENV=development webpack server --open --hot --content-base='./demo/'",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
```
## 参考文章
* [\[译\] 创建并发布一个小而美的 npm 包，没你想的那么难！ - 掘金 (juejin.cn)](https://juejin.cn/post/6844903749199069197)
* [Vue 3 和 Webpack 5 来了，手动搭建的知识该更新了 - 掘金 (juejin.cn)](https://juejin.cn/post/6921161482663100423#comment)
* <https://github.com/PanJiaChen/vue-countTo>