HLJ
发布于
2019-05-24 11:24:16
npm项目创建打包发布
上一篇文章:
对表格同类项合并排序的angular代码
下一篇文章:
Linux安装npm并打包前端代码
前提是已经安装了nodejs和npm。当前nodejs版本:v10.2.0;npm版本:6.1.0。
本示例工具使用Visual Studio Code 1.20.1(vs code),也可以使用其它工具
下面开始操作
1、在某个磁盘分区下创建项目目录:my-npm-project。例如:E:\Workspace\my-npm-project
2、启动vs code
3、点击vs code左上角“文件” ->“打开文件夹”,打开“E:\Workspace\my-npm-project”
4、快捷键ctrl+`打开“终端”(如果已经是打开状态的忽略此步骤)
version:版本,第一个数字一般为版本不兼容改动,第二个数字为版本兼容的功能修改,第三个为版本兼容的bug修复
description:包的说明
main:入口文件
scripts:可执行的脚本命令
keywords:关键字
author:作者
license:许可证书
8、在src创建HelloWorld.js文件,内容如下
/** 测试类 */
class HelloWorld {
/**
* 在页面中显示hello world
*/
say() {
let div = document.createElement('div')
div.innerHTML = 'hello world'
document.body.appendChild(div)
}
}
9、现在准备使用bable进行打包,安装bable相关功能和rimraf,rimraf用来清理文件,在命令行中输入
npm install rimraf babel-cli babel-preset-es2015 --save-dev
10、打开package.json在scrips中加入cleanLib,bableBuild,prepublish。如下:
"cleanLib": "./node_modules/.bin/rimraf lib"
"bableBuild": "./node_modules/.bin/babel src --out-dir lib",
bableBuild 用bable把src中的文件打包编译到lib中
prepublish 执行上面两个脚本,prepublish会在npm publish前执行
11、在项目根目录创建.babelrc文件,内容如下
{
"presets": [
"es2015"
]
}
配置bable对es6(es2015)进行转换
npm config set registry http://registry.npmjs.org(这句是有坑的,看后面)
17、名字改为npm-project2328,执行npm publish
本示例工具使用Visual Studio Code 1.20.1(vs code),也可以使用其它工具
下面开始操作
1、在某个磁盘分区下创建项目目录:my-npm-project。例如:E:\Workspace\my-npm-project
2、启动vs code
3、点击vs code左上角“文件” ->“打开文件夹”,打开“E:\Workspace\my-npm-project”
4、快捷键ctrl+`打开“终端”(如果已经是打开状态的忽略此步骤)
5、在终端窗口中输入npm init --yes,显示下面信息
{ "name": "my-npm-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "langfutao2018", "license": "ISC" }name:包名
version:版本,第一个数字一般为版本不兼容改动,第二个数字为版本兼容的功能修改,第三个为版本兼容的bug修复
description:包的说明
main:入口文件
scripts:可执行的脚本命令
keywords:关键字
author:作者
license:许可证书
6、在项目根目录下创建src文件夹和index.js文件。src存放源文件;index.js为包入口;目前项目结构如下:
module.exports = require('./lib/HelloWorld.js')这里使用的是lib而不是src,是因为我们打算使用es6语法,为了使依赖此项目的项目的不必须使用es6,准备使用bable把src里的源文件打包编译到lib中
8、在src创建HelloWorld.js文件,内容如下
/** 测试类 */
class HelloWorld {
/**
* 在页面中显示hello world
*/
say() {
let div = document.createElement('div')
div.innerHTML = 'hello world'
document.body.appendChild(div)
}
}
9、现在准备使用bable进行打包,安装bable相关功能和rimraf,rimraf用来清理文件,在命令行中输入
npm install rimraf babel-cli babel-preset-es2015 --save-dev
10、打开package.json在scrips中加入cleanLib,bableBuild,prepublish。如下:
"cleanLib": "./node_modules/.bin/rimraf lib"
"bableBuild": "./node_modules/.bin/babel src --out-dir lib",
"prepublish":"npm run cleanLib && npm run bableBuild"
bableBuild 用bable把src中的文件打包编译到lib中
prepublish 执行上面两个脚本,prepublish会在npm publish前执行
11、在项目根目录创建.babelrc文件,内容如下
{
"presets": [
"es2015"
]
}
配置bable对es6(es2015)进行转换
12、当前项目结构:
npm config set registry http://registry.npmjs.org(这句是有坑的,看后面)
然后执行npm adduser如下
14、终于可以发布了,在命令行执行npm publish
15、再次执行npm publish
16、到package.json里改个名字
执行npm publih
17、名字改为npm-project2328,执行npm publish
终于成功了,收到一封来自npm的邮件:
18、去npm网站上看下
最后生成于 2022-03-09 14:32:27
上一篇文章:
对表格同类项合并排序的angular代码
下一篇文章: