Wujie-vue3-dl NPM

wujie-vue3是根据wujie封装的vue3版本的wujie框架。这个项目我们基于wujie的组件，使用vue3+webpack+swc封装的自己的wujie的vue3版本的框架。

生成`package.json`和`tsconfig.json`文件

pnpm init
tsc --init

其他文件手动创建即可。

安装 `wujie`

pnpm i wujie

安装其他需要使用到的库

-D表示开发环境才需要使用的库，会装到devDependencies中。换言之，使用wujie的项目已经安装过vue的库了，所以不需要再安装一遍vue库了，所以把vue给放到开发环境中。

pnpm i vue -D
pnpm i webpack webpack-cli -D # 使用webpack
pnpm i typescript -D # 当前项目使用ts写的，所以需要安装
pnpm i ts-loader -D # ts的解析器

打包

pnpm run lib

webpack.config.js解析

mode: 'none' // 如果不加mode选项，打包出来的index.js里的内容是被压缩过后的，不好看；mode为none时，打出来的包是源码的方式，但是index.js文件的内容很多，是因为把wujie和vue这些内容也打到包里边了，如果不想这些打进包里面，可以使用externals选项
externals: {
  vue: 'vue',
  wujie: 'wujie'
}

完整的内容

const { Configuration } = require('webpack')
const path = require('path')
 
/**
 * @type {Configuration} //配置智能提示
 */
const config = {
  mode: 'none',
  externals: {
    vue: 'vue',
    wujie: 'wujie'
  },
  entry: './src/index.ts', // 入口文件
  output: { // 出口文件
    filename: 'index.js',
    path: path.resolve(__dirname, 'lib')
  },
  module: {
    rules: [ // 使用了ts，需要配置ts打包规则
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  }
}

module.exports = config

这种方式打包，index.js文件的内容就很少了，打包后的内容为es6语法，且打包的时间需要8644ms。我们使用swc来重新构建打包

使用swc打包

(swc-loader)https://swc.rs/docs/usage/swc-loader 安装

pnpm i -D @swc/core swc-loader

修改webpack.config.js中ts-loader为swc-loader

const config = {
  ...
  module: {
    rules: [ // 使用了ts，需要配置ts打包规则
      {
        test: /\.ts$/,
        use: 'swc-loader'
      }
    ]
  }
}

使用swc-loader打包时间变为了297ms，且index.js文件的语法也变为了es5。

上面的打的包还不能使用，因为前端有很多代码规范，如AMD、CMD、esModule、CommonJS、IIFE等，所以需要在webpack中配置统一的UMD格式（UMD格式支持AMD、CMD、CommonJS、全局变量的模式）修改webpack.config.js

const config = {
  ...
  output: { // 出口文件
    filename: 'index.js',
    path: path.resolve(__dirname, 'lib'),
    library: "wujievue", // 正常工作中用不到这library和libraryTarget两个属性，只有开发库的时候才会使用这两个东西
    libraryTarget: "umd",
    umdNamedDefine: true
  },
}

然后重新打包pnpm run lib,打包后文件中会去判断是否是支持的模式。但是这种方式不兼容esModule规范，即import和export方式，我们

安装@swc/cli

pnpm i -D @swc/cli

然后创建一个文件.swcrc，文件的内容直接去官网复制即可

在package.json配置打包命令

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lib": "webpack",
    "esm": "swc src/index.ts -d esm" // 入口文件index.ts输出到esm目录
  },
}

执行打包命令pnpm run esm，如果报语法错误，得修改.swcrc中的内容。

修改前内容

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
  "parser": {
  "syntax": "ecmascript",
  "jsx": false,
  "dynamicImport": false,
  "privateMethod": false,
  "functionBind": false,
  "exportDefaultFrom": false,
  "exportNamespaceFrom": false,
  "decorators": false,
  "decoratorsBeforeExport": false,
  "topLevelAwait": false,
  "importMeta": false
  },
  }
}

修改后内容

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
  "parser": {
  "syntax": "typescript" // 主要是修改这里
  },
  }
}

执行打包命令pnpm run esm。出现打包目录esm。

发布库到npm

修改package.json文件 修改前内容

{
  "name": "wujie-vue3-dl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lib": "webpack",
    "esm": "swc src/index.ts -d esm"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wujie": "^1.0.17"
  },
  "devDependencies": {
    "@swc/cli": "^0.1.62",
    "@swc/core": "^1.3.62",
    "swc-loader": "^0.2.3",
    "ts-loader": "^9.4.3",
    "typescript": "^5.1.3",
    "vue": "^3.3.4",
    "webpack": "^5.85.0",
    "webpack-cli": "^5.1.2"
  }
}

修改后核心内容

main：修改入口文件
files：主要是要发布到npm上的文件
module：使用import语法时需要从哪个文件找

{
  "name": "wujie-vue3-dl",
  "version": "0.0.1",
  "main": "lib/index.js",
  "files": [
    "lib",
    "esm",
    "index.d.ts"
  ],
}

发布到npm

前提：如果镜像不是使用的npm，需要切换镜像到npm

npm adduser # 添加账号
npm login # 登录账号
npm publish # 发布包

mmp

wujie

@everything-registry/sub-chunk-3169

0.0.1

11 months ago

生成package.json和tsconfig.json文件

安装 wujie