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

劉玉平發布于2019-08-26 13:53 / 435人閱讀

摘要：地址點個，給我們一點動力中文文檔地址交流地址點個，謝謝這套費了幾個月時間和很多心血，現在已經趨于完善，你完全可以在你的生產環境中試著使用。

介紹

構建自己的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版本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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