摘要:下雪了,在家閑著,不如寫一個包發(fā)布。簡單的包的發(fā)布網(wǎng)上有很多教程,我就不記錄了。這里記錄下,一個復雜的包發(fā)布,復雜指的構建環(huán)境復雜。同時發(fā)布格式的版本以供外部調(diào)用。
下雪了,在家閑著,不如寫一個npm 包發(fā)布。簡單的 npm 包的發(fā)布網(wǎng)上有很多教程,我就不記錄了。這里記錄下,一個復雜的 npm 包發(fā)布,復雜指的構建環(huán)境復雜。
整個工程使用 rollup 來構建,其中會引進 babel 來轉譯 ES6,利用 Eslint 來規(guī)范代碼的書寫風格,最后代碼的發(fā)布會經(jīng)過 terser 壓縮。同時發(fā)布 umd、es 格式的版本以供外部調(diào)用。
完整目錄結構如下:
下面是整個過程的記錄
一、初始化工程
yarn init -y
初始化后,修改 package.json 內(nèi)容,如 name(項目名),description(項目描述)等信息。
二、安裝 rollup
yarn add rollup@1.0.0 --dev
三、創(chuàng)建配置文件 rollup.config.js
export default { input: "src/index.js", output: { file: "index.common.js", format: "umd", name: "index" } }
四、安裝 babel
yarn add rollup-plugin-babel@4.2.0 @babel/core@7.2.2 @babel/preset-env@7.2.3 --dev
五、配置 babel
1、創(chuàng)建配置文件 .babelrc
{ "presets": [ [ "@babel/preset-env", { "modules": false } ] ] }
2、與 rollup 集成,在 rollup.config.js 中配置 plugins
import babel from "rollup-plugin-babel" export default { input: "src/index.js", output: { file: "index.common.js", format: "umd", name: "index" }, plugins: [ babel({ exclude: "node_modules/**", runtimeHelpers: true }) ] }
六、安裝 eslint
yarn add eslint@5.11.1
七、配置 eslint
1、生成 eslint 配置
. ode_modules.bineslint --init
2、與 rollup 集成,在 rollup.config.js 中配置 plugins
import babel from "rollup-plugin-babel" import { eslint } from "rollup-plugin-eslint" export default { input: "src/index.js", output: { file: "index.common.js", format: "umd", name: "index" }, plugins: [ eslint({ include: ["src/**"], exclude: ["node_modules/**"] }), babel({ exclude: "node_modules/**", runtimeHelpers: true }) ] }
八、commonjs 兼容
yarn add rollup-plugin-commonjs@9.2.0 rollup-plugin-node-resolve@4.0.0 --dev
九、與 rollup 集成,在 rollup.config.js 中配置 plugins
import babel from "rollup-plugin-babel" import { eslint } from "rollup-plugin-eslint" import resolve from "rollup-plugin-node-resolve" import commonjs from "rollup-plugin-commonjs" export default { input: "src/index.js", output: { file: "index.common.js", format: "umd", name: "index" }, plugins: [ resolve({ jsnext: true, main: true, browser: true }), commonjs(), eslint({ include: ["src/**"], exclude: ["node_modules/**"] }), babel({ exclude: "node_modules/**", runtimeHelpers: true }) ] }
十、安裝 terser, 用來壓縮代碼
yarn add rollup-plugin-terser@4.0.0 --dev
十一、與 rollup 集成,在 rollup.config.js 中配置 plugins
import babel from "rollup-plugin-babel" import { eslint } from "rollup-plugin-eslint" import resolve from "rollup-plugin-node-resolve" import commonjs from "rollup-plugin-commonjs" import { terser } from "rollup-plugin-terser" export default { input: "src/index.js", output: { file: "index.common.js", format: "umd", name: "index" }, plugins: [ resolve({ jsnext: true, main: true, browser: true }), commonjs(), eslint({ include: ["src/**"], exclude: ["node_modules/**"] }), babel({ exclude: "node_modules/**", runtimeHelpers: true }), terser() ] }
十二、引入環(huán)境變量,實踐差異化打包
1、安裝插件
yarn add rollup-plugin-replace@2.1.0 --dev
2、配置 plugins
import babel from "rollup-plugin-babel" import { eslint } from "rollup-plugin-eslint" import resolve from "rollup-plugin-node-resolve" import commonjs from "rollup-plugin-commonjs" import { terser } from "rollup-plugin-terser" import replace from "rollup-plugin-replace" export default { input: "src/index.js", output: { file: "index.common.js", format: "umd", name: "index" }, plugins: [ resolve({ jsnext: true, main: true, browser: true }), commonjs(), eslint({ include: ["src/**"], exclude: ["node_modules/**"] }), babel({ exclude: "node_modules/**", runtimeHelpers: true }), replace({ exclude: "node_modules/**", ENVIRONMENT: JSON.stringify(process.env.NODE_ENV) }), terser() ] }
十三、參數(shù)化配置,加入版權說明,最終配置如下
import resolve from "rollup-plugin-node-resolve" import commonjs from "rollup-plugin-commonjs" import { eslint } from "rollup-plugin-eslint" import babel from "rollup-plugin-babel" import replace from "rollup-plugin-replace" import { terser } from "rollup-plugin-terser" const pJson = require("./package.json") const version = pJson.version const license = pJson.license const banner = "/*! " + ` * ${pJson.name} v${version} ` + ` * (c) 2018-${new Date().getFullYear()} ` + ` * Released under the ${license} License. ` + " */" const ENV = process.env.NODE_ENV.trim() const paths = { input: { root: "src/index.js" }, output: { root: "dist/" } } const fileNames = { development: "index.common.js", production: "index.common.js", production6: "index.esm.js" } const fileName = fileNames[ENV] export default { input: `${paths.input.root}`, output: { file: `${paths.output.root}${fileName}`, format: ENV === "production6" ? "es" : "umd", name: "index", banner }, plugins: [ resolve({ jsnext: true, main: true, browser: true }), commonjs(), eslint({ include: ["src/**"], exclude: ["node_modules/**"] }), babel({ exclude: "node_modules/**", runtimeHelpers: true }), replace({ exclude: "node_modules/**", ENVIRONMENT: JSON.stringify(process.env.NODE_ENV) }), ENV && ENV.includes("production") && terser({ output: { comments: /^!/ } }) ] }
三、業(yè)務代碼編寫
在 src/index.js 中編寫具體業(yè)務代碼
四、打包
在 package.json 中添加
"scripts": { "dev": "set NODE_ENV=development && rollup -c", "build": "yarn run buildcjs && yarn run buildesm", "buildcjs": "set NODE_ENV=production && rollup -c", "buildesm": "set NODE_ENV=production6 && rollup -c" }
運行命令
yarn run build
五、發(fā)布
npm publish
發(fā)布前記得記得 注冊 帳號,記得修改 package.json 中 private 字段為 false
"private": false
后記:rollup-plugin-uglify@6.0.0 在 rollup@1.0.0 時有警告,文章中原 rollup-plugin-uglify 被替換成 rollup-plugin-terser
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100548.html
摘要:如何選擇就如果上面所有,需要打包進生產(chǎn)環(huán)境就保存到,只是在開發(fā)或者打包的時候使用的就保存到即可。提示不能發(fā)布當前版本解決方案不能發(fā)布已經(jīng)發(fā)布的版本,修改一下版本號就可以了想不到了,想到了再寫資源項目 0x001 概述 本篇文章承接上文,記錄的是一些使用過程中的疑惑 0x001 墻的原因使得包下載太慢 解決方案:使用淘寶cnpm,推薦使用cnpm,因為如果修改npm倉庫,將會導致無法發(fā)布...
摘要:所以此版本號在這里的作用并不是用來區(qū)分版本的,小版本號才是真正用來做版本區(qū)分的,那么在引用這個就要這么來控制版本號,舉個栗子鎖定大版本號和小版本號,不管我們開發(fā)過程中提交了多少次,我們引用都是最新的。 最近在把公司內(nèi)部用的一個庫發(fā)布到內(nèi)網(wǎng)的npm私服上,僅僅是發(fā)布的話是比較簡單的,但這個庫是由多個人一起維護的,而且npm私服只有一套,所以生產(chǎn)環(huán)境和開發(fā)環(huán)境,用的是同一個,那么,我們的需...
摘要:包說明包實際是一個存檔文件,即一個目錄直接打包為或格式的文件,安裝后解壓還原為目錄。完全符合規(guī)范的包目錄應該包含如下這些文件包描述文件。用于存放單元測試用例的代碼。 keepsmiling說明 一些常用的函數(shù)集合,主要用到的技術如下: ES6的包處理方式; webpack打包方式; BDD測試用例,只寫了部分; 使用jsdoc生成注釋文檔; 你用eslint優(yōu)化代碼格式; 主...
摘要:我發(fā)布了我的第一個組件,一個基于的標簽云組件。然后將這個編譯命令寫到里,如下那么以后要編譯下面的代碼,只需要執(zhí)行現(xiàn)在我們已經(jīng)有編譯好的代碼了,接下來就可以發(fā)布到供其他人使用了。 我發(fā)布了我的第一個 npm 組件,一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑,花在完善整個發(fā)布流程的時間遠多于寫這個組件本身的時間,所以我記錄下我覺得一個正常的 react 組件的...
閱讀 472·2021-11-22 12:05
閱讀 1533·2021-11-17 09:33
閱讀 3579·2021-11-11 16:54
閱讀 2659·2021-10-14 09:49
閱讀 4024·2021-09-06 15:01
閱讀 1821·2019-08-29 17:23
閱讀 693·2019-08-29 14:09
閱讀 712·2019-08-29 12:28