共计 2661 个字符,预计需要花费 7 分钟才能阅读完成。
创建一个项目目录
mkdir project
创建 package.json
npm init
配置 tsconfig.json
- npm -i typescript -g // 全局安装 typescript, 可以使用 tsc 命令
- tsc –init // 创建默认的 tsconfig.json 文件
{
"compilerOptions": {
"target": "es5", // 指定 ECMAScript 目标版本
"module": "es2015", // 指定模块代码类型
"lib": ["es2015", "es2017", "dom"], // 指定要包含在编译中的库文件
"outDir": "./dist", // 编译后生成的文件目录
"strict": true, // 启用所有严格的类型检查选项
"esModuleInterop": true
}
}
开始编码
- 在项目的根目录创建你的源代码目录,比如创建一个 src 目录,之后你的代码就在该目录下编写
- 在 src 下指定你的入口文件, 比如 index.ts, 之后打包的时候根根据你的入口 index.ts 输出编译为 index.js
- 在 package.json 中指定程序的入口
{
"name": "demo",
"version": "1.0.0",
"description": "","main":"./dist/index.js", // 这里指定程序的入口"scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"author":"",
"license": "ISC"
}
编译
- 因为你的项目中可能会有 css 文件之类的非 js 文件,所以采用 webpack 的编译方式更加灵活
- 在项目的根目录下创建一个 webpack.config.js
-
目标生成两个版本的包文件:
(1)供类似于使用方直接 import 这种方式导入的, 即 UMD
(2)类似于使用方在网页中直接通过你的 script 标签引入你的文件这种方式, 即通过全局变量的方式引入
- 具体如下
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UMD = {
entry: './src/index.ts',
mode: 'production',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
resolve: {extensions: [ '.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
library: 'demo', // 以库的形式导出入口文件
libraryTarget: 'umd' // 以库的形式导出入口文件时,输出的类型, 这里是通过 umd 的方式来暴露 library, 适用于使用方 import 的方式导入 npm 包
},
optimization: {minimize: true},
plugins: [new CleanWebpackPlugin()]
};
const CLIENT = {
entry: './src/index.ts',
mode: 'production',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
resolve: {extensions: [ '.tsx', '.ts', '.js']
},
output: {
filename: 'demo.js',
path: path.resolve(__dirname, 'browser'),
library: 'demo', // 以库的形式导出入口文件
libraryTarget: 'window'// 以库的形式导出入口文件时,输出的类型。这里你导出的方法变量会挂载到 window.demo 上,适用于使用方通过 window 对象访问
},
optimization: {minimize: true},
plugins: [new CleanWebpackPlugin()]
};
module.exports = [UMD, CLIENT];
- 将编译命令 webpack –progress –display-chunks - p 添加到 package.json 中的 build 上, 这样就能通过 npm run build 命令来快速编译了
{
"name": "demo",
"version": "1.0.0",
"description": "","main":"./src/index.js", // 这里指定程序的入口"scripts": {"build":"webpack --progress --display-chunks -p","test":"echo \"Error: no test specified\" && exit 1"},"author":"",
"license": "ISC"
}
- 接下来你就会在 dist 目录下和 browser 目录下看到你打包编译输出的两个包
测试
一般我们在写好一个 npm 包都是通过 npm i package-name, import xxx from package-name 交给其他项目来使用。但是如果将我们的包还没有测试好,直接发到远程未免显得有点笨拙。我们可以在本地直接引入你刚刚编写的 npm 包,无须发到远程
-
npm link // 在你的项目的根目录 npm link
npm link 将在全局的 node_modules/<package> 中创建一个符号链接,该文件 link 到执行 npm link 命令的包
-
npm link package-name // 进入你要测试的项目,npm link 你项目的名字(package.json 中的 name),你就会发现你可以 import 你刚刚编写的 npm 包了
npm link package-name 将创建从全局安装的 package-name 到当前文件夹的 node_modules / 的符号链接。
发包
-
创建.npmingnore 文件, 在发包之前排除一些没有必要发的文件
touch .npmingnore
-
注册 npm,就按照提示依次填写信息就好了
npm adduser
-
发布
npm publish
正文完
发表至: javascript
2019-05-21