引见

构建本身的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 库名@版本<br/>
例： npm unpublish libraryName@1.0.0<br/>
作废宣布只要在宣布的24小时以内有用