网上有很多关于如何发布npm包的文章，但基本只介绍了如何注册用户，然后发布一个简单的npm包。但其实很多同学都想知道如何开发和调试一个npm包，想知道像Antd那样的UI包是如何开发调试的。
首先新建一个文件夹，名称可以就是包的名称(包的名称只能小写不能有大写字母，单词间隔可以用中横线，也可以不要)。
mkdir nodelayout
执行（参数-y表示默认同意所有，不加的话会同意好几次。）
npm init -y
执行后，文件目录中会生成一个package.json文件。依次添加文件和文件夹，和下面目录结构一样。
├── README.md
├── webpack.config.js
├── package.json
├── less
│ └── index.less
├── lib
│ └── index.html
├── src
│ └── index.js
如果还依赖其它包，直接install即可
npm install --save-dev d3
README.md主要需要写上一些关于包的一些使用帮助和文档。
How to use?
npm install nodelayout
webpack.config.js
/* mode: development or production*/
const path = require('path');
module.exports = {
// devtool: 'source-map',
entry: './src/index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'lib'),
filename: 'index.js',
library: "nodeLayout",
},
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}
]
},
],
},
devServer: {
static: {
directory: path.join(__dirname, 'lib'),
},
open: false, //是否弹出新窗口
compress: true,
port: 9000,
}
};
package.json
开发调试使用yarn start或npm start即可。完成开发后，执行yarn build，然后使用npm publish即可发布。
{
"name": "nodelayout",
"version": "0.0.1",
"description": "For node Layout.",
"main": "lib/index.js",
"module": "lib/index.js",
"scripts": {
"start": "webpack serve",
"watch": "webpack --watch",
"build": "webpack --progress"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fridaymeng/nodeLayout.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/fridaymeng/nodeLayout/issues"
},
"homepage": "https://github.com/fridaymeng/nodeLayout#readme",
"devDependencies": {
"css-loader": "^6.4.0",
"less": "^4.1.2",
"less-loader": "^10.1.0",
"style-loader": "^3.3.0",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1",
"d3": "^7.1.1"
}
}
index.less
.nodelayout-wrap {
background: #fff;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
background: #f3f4f5;
}
</style>
</head>
<body>
<div id="node-wrap"></div>
<script src="index.js"></script>
<script>
nodeLayout.init({
id: "node-wrap",
data: []
})
</script>
</body>
</html>
index.js
import * as d3 from "d3";
import "./less/index.less";
function init(params = {}) {
console.log(params.data);
d3.select(`#${params.id}`).attr("height", 600).attr("class", "nodelayout-wrap");;
}
export { init };