V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Reming960227
V2EX  ›  前端开发

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

  •  
  •   Reming960227 · 2019-05-17 09:15:47 +08:00 · 2210 次点击
    这是一个创建于 2019 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

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

    github 地址

    https://github.com/Reming960227/atom-design

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

    中文文档地址

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

    现在进入正题吧~~~

    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 [email protected]
    取消发布只有在发布的 24 小时之内有效

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5674 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 09:09 · PVG 17:09 · LAX 01:09 · JFK 04:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.