npm初始化
初始化: npm init
name: (my-npm)
模块名，之后发布之后就可以让用户npm install xxxx来引用你的开源模块了
version: (1.0.0)
- 版本号，语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新
- 如果只是修复bug，需要更新Z位
- 如果是新增了功能，但是向下兼容，需要更新Y位
- 如果有大变动，向下不兼容，需要更新X位
description: 0.0.1
简单介绍自己的模块
entry point: (index.js)
入口文件，必要，当通过require('xxx')时，是读取main里声明的文件
test command:
测试命令
git repository:
git仓库地址
keywords:
关键词，可以通过npm搜索你填写的关键词找到你的模块
author: Awe
代码授权许可
license: (ISC) MIT
About to write to F:\github\my-npm\package.json:
初始化项目完成，可以看到目录中出现了一个叫 package.json 的文件
{
"name": "my-npm",
"version": "1.0.0",
"description": "0.0.1",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Awe",
"license": "MIT"
}
编写代码（js功能代码）
class Qarticles {
constructor(canvas, options = {}) {
this.canvas = canvas
this.width = options.width || 100
}
...
}
module.exports = Qarticles
编写代码（vue功能代码）
{
"name": "hello-world",
"description": "",
"version": "1.0.0",
"author": "十三月",
"license": "MIT",
"private": false,
"main": "dist/helloWorld.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"build": "webpack --display-error-details --config webpack.config.js"
},
"dependencies": {
"vue": "^2.5.11"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.12.0",
"webpack-dev-server": ">=3.4.1"
}
}
const requireComponents = require.context("../src", true, /\.vue$/);
const componentCom = {
install: (Vue) => {
// 注意：第一个参数是组件名称，我们在页面引用时用到
requireComponents.keys().forEach((fileName) => {
// 组件实例
const reqCom = requireComponents(fileName);
// 截取路径作为组件名
const reqComName = reqCom.name || fileName.replace(/\.\/(.*)\.vue/, "$1");
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom);
});
},
};
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录
publicPath: '/dist/',//路径
filename: 'helloWorld.js',//打包之后的名称
library: 'helloWorld', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
- npm run build
- npm login
- npm publish
// 暴露 install 函数
export default componentCom;
### 发布模块
npm login
npm publish
### 备注
npm update <package>
//可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
npm cache clear
//可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
npm unpublish <package>@<version>
//可以撤销发布自己发布过的某个版本代码。
