成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一文教你構(gòu)建自己的library、webpack優(yōu)化和npm版本控制

劉玉平 / 461人閱讀

摘要：地址點(diǎn)個(gè)，給我們一點(diǎn)動(dòng)力中文文檔地址交流地址點(diǎn)個(gè)，謝謝這套費(fèi)了幾個(gè)月時(shí)間和很多心血，現(xiàn)在已經(jīng)趨于完善，你完全可以在你的生產(chǎn)環(huán)境中試著使用。

介紹 
構(gòu)建自己的UI庫，你必須要對(duì)一款打包工具熟悉(webpack, gulp或者grunt), 本文以webpack為例。

github 地址: https://github.com/reming0227... (點(diǎn)個(gè) star，給我們一點(diǎn)動(dòng)力 )

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

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

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

點(diǎn)個(gè)star，謝謝! 這套UI費(fèi)了幾個(gè)月時(shí)間和很多心血，現(xiàn)在已經(jīng)趨于完善，你完全可以在你的生產(chǎn)環(huán)境中試著使用。對(duì)于性能的考慮，以及js/css壓縮，按需引入等等都已經(jīng)很完善。這套UI庫富含移動(dòng)端可能碰到的手勢組件、彈出組件、懶加載、滾動(dòng)加載等等...

中文文檔地址

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

現(xiàn)在進(jì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]會(huì)自己生產(chǎn)entry的key名，或者你可以用hash，chunkhash這都是沒問題的
    library: "libraryName", // 配置庫名 
    libraryTarget: "umd", // 配置輸出對(duì)象的規(guī)范，你可以使用amd, commonjs, commonjs2，如果要兼容amd和commonjs則使用umd
    globalObject: "this", // 配置庫的全局環(huán)境, umd則使用this
    umdNamedDefine: true // umd輸出是否為amd規(guī)范命名，默認(rèn)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有個(gè)坑， 必須要有css-loader，而且sass-loader,postcss-loader等等要放css-loader之后
        "css-loader",
        "postcss-loader"
      ]
    }]
  },
  resolve: {
    extensions: [".js"] // 配置默認(rèn)擴(kuò)展名，你也可以設(shè)置.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模式會(huì)自己使用uglifyjs-webpack-plugin來壓縮js，css需要自己配置壓縮。接著配置.babelrc來使用babel插件以及預(yù)設(shè)

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env", // 轉(zhuǎn)es5
      {
        "modules": false
      }
    ]
  ],
  "plugins": [...]
  ]
}
npm 發(fā)布

到這里你的webpack就算配置完了，然后你可以打包自己的庫。
接著就是npm發(fā)布，你可能用的cnpm，那么你要切回npm， 然后配置.npmignore把不需要傳到npm的過濾掉

// .npmignore
/node_modules/
/文件名/
/.npmignore
/xxx.js

之后使用npm publish發(fā)布自己的庫, 發(fā)布前請(qǐng)確保自己是否有REAMDE.MD文件，這個(gè)是npm要求一定要上傳的文件。包名,版本以及其他信息，npm會(huì)從pacakge.json里讀取。

你可能會(huì)想取消發(fā)布這時(shí)候就使用 npm unpublish 庫名@版本

例： npm unpublish [email protected]

取消發(fā)布只有在發(fā)布的24小時(shí)之內(nèi)有效

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109759.html

相關(guān)文章

  • 一文看懂npm、yarn、pnpm之間的區(qū)別

    摘要：請(qǐng)注意，在版本號(hào)之前有個(gè)字符。理論上，次版本號(hào)的變化并不會(huì)影響向后兼容性。雖然可以通過命令關(guān)閉在版本號(hào)前面使用的默認(rèn)行為，但這個(gè)只會(huì)影響頂級(jí)依賴關(guān)系。 本文作者對(duì)比了當(dāng)前主流的包管理工具npm、yarn、pnpm之間的區(qū)別，并提出了合適的使用建議，以下為譯文： NPM npm是Node.js能夠如此成功的主要原因之一。npm團(tuán)隊(duì)做了很多的工作，以確保npm保持向后兼容，并在不同的環(huán)境中...

    zgbgx 評(píng)論0 收藏0

  • webpack 基礎(chǔ)與項(xiàng)目優(yōu)化實(shí)踐總結(jié)

    摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...

    Scorpion 評(píng)論0 收藏0

  • 手把手教你用typescript擼一個(gè)npm包

    摘要：但是如果將我們的包還沒有測試好，直接發(fā)到遠(yuǎn)程未免顯得有點(diǎn)笨拙。發(fā)包創(chuàng)建文件在發(fā)包之前排除一些沒有必要發(fā)的文件注冊(cè)，就按照提示依次填寫信息就好了發(fā)布由于本人學(xué)識(shí)有限，有很多需要提升的地方，望大家多多指教。 創(chuàng)建一個(gè)項(xiàng)目目錄 mkdir project 創(chuàng)建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...

    ZHAO_ 評(píng)論0 收藏0

  • vue構(gòu)建優(yōu)化

    摘要：第一步新建一個(gè)名字自己定義值得關(guān)注的是數(shù)組資源依賴包，提前編譯這里根據(jù)自己項(xiàng)目的具體引用情況自行添加資源依賴包，提前編譯定義文件生成的位置的部分由的名字替換輸出到那個(gè)全局變量上和一樣即可。 原因 在使用vue開發(fā)單頁面應(yīng)用時(shí)，隨著項(xiàng)目頁面的增多，你會(huì)發(fā)現(xiàn)生產(chǎn)環(huán)境的build速度會(huì)很慢，同時(shí)頁面初始的js大小越來越大。當(dāng)你無法忍受的時(shí)候就該優(yōu)化了。 思路 這方面的優(yōu)化無非就是異步加載、提...

    SoapEye 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<