一文教你构建自己的library以及webpack优化和npm版本控制

介绍

构建自己的UI库,你必须要对一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack为例。

github地址

https://github.com/Reming9602...

可以点个star,谢谢! 这套UI费了几个月时间和很多心血,现在已经趋于完善,你完全可以在你的生产环境中试着使用。对于性能的考虑,以及js/css压缩,按需引入等等都已经很完善。这套UI库富含移动端可能碰到的手势组件、弹出组件、懒加载、滚动加载等等...

中文文档地址

https://atom-design.github.io...

现在进入正题吧~

webpack配置

首先就是webpack配置,我用注释的形式说明

const path = require('path');
const webpack = require('webpack');
// 用于清空之前的打包文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 抽取所有的css到单一文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: {
   'xxx': './packages/xxx.js',
   // 或者你可以多入口配置
   'xxx': './packages/xxx.js'
  },
  output: {
    path: path.resolve(__dirname, 'bundle'), // 打包的文件目录
    filename: './[name].js', // 打包文件名, [name]会自己生产entry的key名,或者你可以用hash,chunkhash这都是没问题的
    library: 'libraryName', // 配置库名 
    libraryTarget: 'umd', // 配置输出对象的规范,你可以使用amd, commonjs, commonjs2,如果要兼容amd和commonjs则使用umd
    globalObject: 'this', // 配置库的全局环境, umd则使用this
    umdNamedDefine: true // umd输出是否为amd规范命名,默认false
  },
  externals: { // 如果用到额外的第三方库,为了防止第三方库被打包自己的库,可以使用此字段
    vue: {...},
    react: {...}
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      exclude: path.resolve(__dirname, '/node_modules')
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: path.resolve(__dirname, '/node_modules')
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader, // 使用MiniCssExtractPlugin有个坑, 必须要有css-loader,而且sass-loader,postcss-loader等等要放css-loader之后
        'css-loader',
        'postcss-loader'
      ]
    }]
  },
  resolve: {
    extensions: ['.js'] // 配置默认扩展名,你也可以设置.vue,.ts等等
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
    // 压缩css
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
  ]
}

webpack4的production模式会自己使用uglifyjs-webpack-plugin来压缩js,css需要自己配置压缩。接着配置.babelrc来使用babel插件以及预设

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env", // 转es5
      {
        "modules": false
      }
    ]
  ],
  "plugins": [...]
  ]
}

npm 发布

到这里你的webpack就算配置完了,然后你可以打包自己的库。 接着就是npm发布,你可能用的cnpm,那么你要切回npm, 然后配置.npmignore把不需要传到npm的过滤掉

// .npmignore
/node_modules/
/文件名/
/.npmignore
/xxx.js

之后使用npm publish发布自己的库, 发布前请确保自己是否有REAMDE.MD文件,这个是npm要求一定要上传的文件。包名,版本以及其他信息,npm会从pacakge.json里读取。

你可能会想取消发布这时候就使用 npm unpublish 库名@版本
例: npm unpublish libraryName@1.0.0
取消发布只有在发布的24小时之内有效

原文链接:segmentfault.com

上一篇:node-opcua-constants
下一篇:node-opcua-data-value

相关推荐

  • 项目中npm依赖问题

    最近开发遇到一个npm依赖导致的问题,报错如下。 sloterror(https://img.javascriptcn.com/804ed4a03d02191762c1f48473ba1711 "sl...

    2 年前
  • 随记-npm

    npm npm是包管理器,方便开发人员分享,复用代码 用于搜索js模块/包的网站 npm服务器可下载或上传安装包或命令行程序 npm仓库存储安装包/安装模块 npm 安装 npm依赖于node,...

    2 个月前
  • 针对前端开发可重用组件并发布到NPM

    翻译:疯狂的技术宅 原文:https://www.smashingmagazine....(https://www.smashingmagazine.com/2018/07/reusablecom...

    1 年前
  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。

    3 年前
  • 透过 TDD 模式学习如何实现各种 npm 工具

    前言 在程序員的日常精進之中,閱讀優秀的代碼是必不可少的。透過 TDD 的開發模式,可以模仿那些優秀的代碼,從而提升自己代碼水平。下面介紹如何從零開始搭建 TDD 環境,並構建 isEven 代碼...

    2 年前
  • 边学习变记:npm 常用的几个指令(持续更新。。。)

    在当前文件夹下,地址栏输入cmd 呼出控制台。1.npm init 初始化项目,npm init y 生成默认配置。 2.查看当前使用的镜像地址:npm get registry默认镜像地址:http...

    2 个月前
  • 踩坑札记之 npm 包发布

    重点阐述 npm 包发布前后所踩坑,首先科普如何发布 npm 包。 发布流程 注册账号 开启终端输入: 根据提示输入 username、password、email 即刻注册成功,已注...

    1 年前
  • 贡献你的力量 开发一个Vue组件并发布到npm

    最近在工作中写了一个面向 PC 端的 Vue 滚动组件,关于 PC 端的滚动组件以前也用过一些,但是没有找到特别满意的,所以自己想着把这个组件开源发布出去,希望能够帮到和我有类似需求的人吧! 目标 ...

    1 年前
  • 详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 的配置( , 之类的)。

    3 年前
  • 详解node.js中的npm和webpack配置方法

    概述 Node.js用c语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码...

    2 年前

官方社区

扫码加入 JavaScript 社区