資訊專欄INFORMATION COLUMN
摘要：地址點個，給我們一點動力中文文檔地址交流地址點個，謝謝這套費了幾個月時間和很多心血，現(xiàn)在已經趨于完善，你完全可以在你的生產環(huán)境中試著使用。
介紹
構建自己的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費了幾個月時間和很多心血，現(xiàn)在已經趨于完善，你完全可以在你的生產環(huán)境中試著使用。對于性能的考慮，以及js/css壓縮，按需引入等等都已經很完善。這套UI庫富含移動端可能碰到的手勢組件、彈出組件、懶加載、滾動加載等等...
中文文檔地址https://atom-design.github.io...
現(xiàn)在進入正題吧~~~
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", // 配置輸出對象的規(guī)范，你可以使用amd, commonjs, commonjs2，如果要兼容amd和commonjs則使用umd
globalObject: "this", // 配置庫的全局環(huán)境, umd則使用this
umdNamedDefine: true // umd輸出是否為amd規(guī)范命名，默認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 發(fā)布
到這里你的webpack就算配置完了，然后你可以打包自己的庫。
接著就是npm發(fā)布，你可能用的cnpm，那么你要切回npm， 然后配置.npmignore把不需要傳到npm的過濾掉
// .npmignore /node_modules/ /文件名/ /.npmignore /xxx.js
之后使用npm publish發(fā)布自己的庫, 發(fā)布前請確保自己是否有REAMDE.MD文件，這個是npm要求一定要上傳的文件。包名,版本以及其他信息，npm會從pacakge.json里讀取。
你可能會想取消發(fā)布這時候就使用 npm unpublish 庫名@版本
例： npm unpublish libraryName@1.0.0
取消發(fā)布只有在發(fā)布的24小時之內有效
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/109759.html
摘要：請注意，在版本號之前有個字符。理論上，次版本號的變化并不會影響向后兼容性。雖然可以通過命令關閉在版本號前面使用的默認行為，但這個只會影響頂級依賴關系。 本文作者對比了當前主流的包管理工具npm、yarn、pnpm之間的區(qū)別，并提出了合適的使用建議，以下為譯文： NPM npm是Node.js能夠如此成功的主要原因之一。npm團隊做了很多的工作，以確保npm保持向后兼容，并在不同的環(huán)境中...
摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優(yōu)化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行優(yōu)化配置。同一文件中，修改某個影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優(yōu)化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行...
摘要：但是如果將我們的包還沒有測試好，直接發(fā)到遠程未免顯得有點笨拙。發(fā)包創(chuàng)建文件在發(fā)包之前排除一些沒有必要發(fā)的文件注冊，就按照提示依次填寫信息就好了發(fā)布由于本人學識有限，有很多需要提升的地方，望大家多多指教。 創(chuàng)建一個項目目錄 mkdir project 創(chuàng)建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...
摘要：第一步新建一個名字自己定義值得關注的是數(shù)組資源依賴包，提前編譯這里根據(jù)自己項目的具體引用情況自行添加資源依賴包，提前編譯定義文件生成的位置的部分由的名字替換輸出到那個全局變量上和一樣即可。 原因 在使用vue開發(fā)單頁面應用時，隨著項目頁面的增多，你會發(fā)現(xiàn)生產環(huán)境的build速度會很慢，同時頁面初始的js大小越來越大。當你無法忍受的時候就該優(yōu)化了。 思路 這方面的優(yōu)化無非就是異步加載、提...
閱讀 3746·2021-11-19 09:56
閱讀 1567·2021-09-22 15:11
閱讀 1225·2019-08-30 15:55
閱讀 3434·2019-08-29 14:02
閱讀 3047·2019-08-29 11:07
閱讀 497·2019-08-28 17:52
閱讀 3235·2019-08-26 13:59
閱讀 495·2019-08-26 13:53
