ys-weex-ui

基于 vue 的 npm 包开发模板

组件库发布步骤

1. 在 packages 目录开发组件

2. 生成组件库入口

npm run build:entry

3. 登录 npm（如果登录过一次跳过），未注册的先注册https://www.npmjs.com

npm login

登录成功后，登录信息会存放于全局，也就是说，下次更新发布组件，不需要再重新登录，可通过 npm whoami 可查看当前登录账号名。

4. 发布

npm publish

5. 项目依赖更新

npm update <name> --save
npm update <name> --save-dev

安装

1. 执行以下命令下载项目：

$ git clone https://github.com/HGthecode/vue-npm-template.git

2. 安装依赖：

npm install

3. 启动项目：

npm run serve

项目默认自带了 helloWorld,textComponent 两个示例组件，如不使用删除即可

目录结构

| 目录/文件 | 说明 | | ----------------- | :------------------------------------ | | examples | 组件示例，所有测试示例写在该文件夹下 | | |- App.vue | 示例入口页面 | | |- main.js | 示例入口文件 | | lib | 打包后的文件，执行 npm run lib 后生成 | | packages | 组件文件，在该文件夹下开发组件 | | |- helloWord | 示例组件 | | |- testComponent | 示例组件 | | index.js | 组件统一导出文件 | | public | 静态资源文件 | | .npmignoer | npm 发布配置文件 |

配置 package.json 文件

根据实际情况修改以下几个参数：

{
    "name": "my-component",
    "version": "1.0.1",
    "private": false,
    "main": "lib/init.js",
    "keywords": [
        "hg-components",
        "test"
    ],
    "author": {
        "name": "HG",
        "email": "[email protected]"
    }
}

| 参数 | 说明 | | -------- | :------------------------------------------------------ | | name | 组件名字，确保不会和别人的组件重名，可在 NPM 上测试搜索 | | version | 版本号，默认是 1.0.1 ，之后每次发布，都要修改版本号 | | private | 是否私有，设置为 false 才能发布 | | main | 入口文件，指向我们打包好的 js 文件，一般默认就行 | | keywords | 关键词 | | author | 作者信息 |

包名是 package.json 的 name 字段

打包

执行以下命令，lib 用于混淆代码使用，将在 lib 生成 xxx.umd.min.js，根据生产环境需要使用，如果使用打包的文件，需要修改 package.json 的 main 指向

npm run lib

本地测试

1. 本地生成一个 包名-1.0.1.tgz 的包

npm pack

2. 在另一个项目执行：

npm install 本地项目路径/包名-1.0.1.tgz

仓库脚手架的开发思路

1. 使用 vue-cli 脚手架新建项目，eslint、单元测试、router、vuex 等模块根据例子需要选择，若仓库仅作为组件库开发而无需开发例子页面的，可忽略任何选项。

此处选择 vue2.0 作为脚手架开发，因为 vue3.0 还未普及

2. 修改 src 文件夹为 example，作为例子页面的开发目录

3. 新增 packages 文件夹，作为组件库的开发目录

4. 新增 .npmignore 文件，作为提交 npm 时忽略文件使用，内容可复制：

# 忽略目录
# packages/
examples/
public/

# other
bin/
dist/
node_modules/
node_modules/.bin/
.gitignore
.npmignore
package-lock.json

# 忽略指定文件
vue.config.js
babel.config.js
*.map
.browserslistrc

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

5. 修改 .npmignore 内容，提交 git 时可忽略的文件

# 忽略目录
# packages/
examples/
public/

# other
bin/
dist/
node_modules/
node_modules/.bin/
.gitignore
.npmignore
package-lock.json

# 忽略指定文件
vue.config.js
babel.config.js
*.map
.browserslistrc

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

6. 新增 CHANGELOG.md ，作为每次发布时记录更改项

7. 新增 vue.config.js 文件，修改 webpack 配置项

module.exports = {
// 修改 src 为 examples
pages: {
    index: {
    entry: "examples/main.js",
    template: "public/index.html",
    filename: "index.html",
    },
},
// 组件样式内联
css: {
    extract: false,
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: (config) => {
    config.module
    .rule("js")
    .include.add("/packages/*")
    .end()
    .use("babel")
    .loader("babel-loader")
    .tap((options) => {
        // 修改它的选项...
        return options;
    });
},
};

8. 在 package.json 新增执行命令

  "scripts": {
    "build:entry": "node bin/build-entry.js",
    "lib": "vue-cli-service build --target lib --name ys-weex-ui --dest lib ./index.js",
    ...
  },

9. 在 package.json 里，修改依赖位置，将 dependencies 的全部依赖复制粘贴到 devDependencies，可避免安装此仓库时 node_modules 文件杂乱。

10. 新增组件库入口文件生成代码，bin/build-entry.js，内容如下：

const uppercamelize = require("uppercamelcase");
const fs = require("fs");
const path = require("path");

function indexEntry() {
const tips = `/**
* CopyRight (C) 2021-2024.
* Created by chilson on 21/02/18
*/
`;
const Components = fs
    .readdirSync(path.resolve(__dirname, "../packages"))
    .filter((_) => _ !== "sth you dont want to import");
const importList = Components.map(
    (name) => `import ${uppercamelize(name)} from './packages/${name}';`
);
const exportList = Components.map((name) => `${uppercamelize(name)}`);
const content = `${tips}
${importList.join("\n")}

export {
${exportList.join(",\n  ")}
};
`;
fs.writeFileSync(path.join(__dirname, "../index.js"), content);
}

indexEntry();