前端封装通用js并发布到npm

最新推荐文章于 2024-12-30 11:30:39 发布

若馨呀

最新推荐文章于 2024-12-30 11:30:39 发布

阅读量715

点赞数 7

分类专栏：前端 node npm 文章标签：前端 javascript npm

本文链接：https://blog.youkuaiyun.com/qq_36808770/article/details/137461030

版权

本文介绍了如何使用npm初始化项目并创建package.json，编写index.js，然后通过Webpack进行代码打包，包括配置library和libraryTarget，以及如何使用TerserWebpackPlugin进行代码压缩。最后，还提到了创建.npmignore文件以管理忽略文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发布流程：

新建文件夹
文件夹内，npm init 生成package.json文件
新建index.js 内部有向外抛出模块的代码。因为后期用了webpack打包，把所有源文件放在了src下面。以下是src目录下的index.js代码，向外抛出代码块。

export { isFunction }  // 供局部引入使用 
export default { isFunction } // 供全局导入使用

npm login 登录npm
npm publish 发布

webpack打包文件：

若不希望压缩代码，可省略此步骤。

npm i webpack webpack-cli
安装压缩插件：npm i terser-webpack-plugin -D
新建 webpack.config.js
-library：指定库的全局变量
-libraryTarget：支持库引入的方式

const TerserPlugin = require('terser-webpack-plugin') // 引入压缩插件 module.exports = {
    mode: 'none', // 因为默认是production 默认会进行压缩
    entry: {
        "fc-li-core": "./src/index.js",
        "fc-li-core.min": "./src/index.js"
    },
    output: {
        filename: "