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

刘玉平发布于2019-08-26 13:53 / 473人阅读

摘要：地址点个，给我们一点动力中文文档地址交流地址点个，谢谢这套费了几个月时间和很多心血，现在已经趋于完善，你完全可以在你的生产环境中试着使用。

介绍

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

github 地址: https://github.com/reming0227... (点个 star，给我们一点动力 )

中文文档： https://atom-design.github.io...

demo 地址： https://atom-design.github.io...

交流地址： https://gitter.im/atom_design...

点个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小时之内有效

云服务器 GPU云服务器构建自己的云服务器怎么构建自己的云服务器怎样构建自己的云服务器 webpack版本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109759.html

一文看懂npm、yarn、pnpm之间的区别

摘要：请注意，在版本号之前有个字符。理论上，次版本号的变化并不会影响向后兼容性。虽然可以通过命令关闭在版本号前面使用的默认行为，但这个只会影响顶级依赖关系。本文作者对比了当前主流的包管理工具npm、yarn、pnpm之间的区别，并提出了合适的使用建议，以下为译文： NPM npm是Node.js能够如此成功的主要原因之一。npm团队做了很多的工作，以确保npm保持向后兼容，并在不同的环境中...

zgbgx 2019-08-26 11:58 评论0 收藏0
webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
手把手教你用typescript撸一个npm包

摘要：但是如果将我们的包还没有测试好，直接发到远程未免显得有点笨拙。发包创建文件在发包之前排除一些没有必要发的文件注册，就按照提示依次填写信息就好了发布由于本人学识有限，有很多需要提升的地方，望大家多多指教。创建一个项目目录 mkdir project 创建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...

ZHAO_ 2019-08-26 13:52 评论0 收藏0
vue构建优化

摘要：第一步新建一个名字自己定义值得关注的是数组资源依赖包，提前编译这里根据自己项目的具体引用情况自行添加资源依赖包，提前编译定义文件生成的位置的部分由的名字替换输出到那个全局变量上和一样即可。原因在使用vue开发单页面应用时，随着项目页面的增多，你会发现生产环境的build速度会很慢，同时页面初始的js大小越来越大。当你无法忍受的时候就该优化了。思路这方面的优化无非就是异步加载、提...

SoapEye 2019-08-29 13:24 评论0 收藏0