github 开源地址:zswui

github 说明文档:wiki

1.新建目录wui

(1)进入到 wui 目录 执行 npm init 命令初始化项目。更具提示信息填充将会生成的 package.json 文件。

(2)新建 webpack.config.js 打包文件。

(3)新建 README.md 项目说明文件。

(4)新建 .gitignore 项目忽略文件。

(5)安装webpack 用于编译 JavaScript 模块。

npm install webpack webpack-cli --save-dev

  

(6)安装 babel 相关的编译库,将javascript 代码转换成 浏览器兼容的代码。

npm install babel-loader @babel/core --save-dev

  

(7)给 webpack.config.js 配置 babel-loader 解析信息,。

// module 表示模块信息
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}

  

(8)创建 .babelrc 文件

虽然已经配置好了 Babel ,但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 文件并启用一些插件

首先,你可以使用转换 ES2015+ 的 env preset 。

npm install @babel/preset-env --save-dev

  

为了让 preset 生效,你需要像下面这样定义你的 .babelrc 文件

{
"presets": ["@babel/preset-env"]
}

  

(8) 安装 编译 jsx 语法的库

npm install --save-dev @babel/preset-react

  修改.babelrc文件配置

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

  

(9) 安装 html-webpack-plugin 插件,生成 html 文件.配置到 webpack.config.js 文件

npm install  html-webpack-plugin  --save-dev

  

(10) 安装 react 相关的包

npm i react react-dom --save-dev

  

(11) 安装 webpack-dev-server 作为本地开发环境

npm  i webpack-dev-server -g

  

(12) 在 package.json文件中添加自定义启动脚本

"scripts": {
"start": "webpack --config webpack.config.js",
"test": "npm run test"
}

  

(13) 安装清理文件夹的插件

npm install clean-webpack-plugin --save-dev

  

(14) 安装提取 css 到一个文件的库

npm install --save-dev extract-text-webpack-plugin

  

(15) 安装支持 sass / less 文件的库

npm install --save-dev style-loader css-loader
npm install --save-dev less-loader less
npm install sass-loader node-sass webpack --save-dev
配置 webpack.config.js (14,15 步骤配合操作)

  



package.json 字段含义解释:
1.name 包名,如果有重名可以添加 scoped 前缀,例如(@winyh/wui)
2.verson 版本号,每次发布版本前需要递增修改版本号
3.description 包简介。
4.private 是否私有。一定要设置为 false
5.main 项目入口。
6.directorities 描述模块的结构,暂时可以忽略。
7.scripts 执行脚本,可以在这里添加自定义的执行脚本。
8.registory 仓库地址,设置代码所在仓库地址。
9.keywords 关键字,设置仓库的关键字,方便检索。
10.author 作者,可以输入作者名称。
11.license 许可协议。
12.bugs 提交地址。
13.homepage 项目主页。
14.devDependencies 开发环境依赖包记录。
 


发布:
1.修改package.json文件,添加 "private": false 设置当前组件库为非私有的。否则 npm publish 会报错。
2.修改 version 版本号,npm 发布版本时,会向上叠加(v0.0.1 -> v0.0.2)。发布前不修改版本号也会报错。
3.执行 npm login 登录 npm 账户(需要现在官网注册npm账号)。
4.执行 npm publish 发布最新版本。(发布成功后一般注册邮箱会收到发布版本的消息)
1.报错:
(1)Tapable.plugin is deprecated. Use new API on `.hooks` instead
原因:
extract-text-webpack-plugin目前版本不支持webpack4
解决办法:
npm install extract-text-webpack-plugin@next 2.报错:

  Can't resolve 'style-loader

   npm i style-loader --save-dev

 
05-02 06:41