??????????????????????????????????о???? JavaScript ?????????????????????е??????????????????????????д?С?ν???
??????????????? JavaScript ?????????????? npm ??????????????? Node ???????????????????????????????? Node ?汾????????汾??????????????????
????????????????????????????? Node ????????????????С??????????????????￡???????????????????????????????????????????????С?? browser ????bundle????????????
???????????????? JS ??
???????????????д???С?? JavaScript ???????? base64-encode-string???????????????????????????????????? base64 ?????汾??
???????????????????????????????????????? btoa ??????
module.exports = function (string) {
return btoa(string);
};
????????? Node ????? btoa ??????????????????????????????????? Buffer?????????????? buffer.toString()??
module.exports = function (string) {
return Buffer.from(string?? 'binary').toString('base64');
};
??????????????????????????????????? base64 ????汾?????磺
var b64encode = require('base64-encode-string');
b64encode('foo');    // Zm9v
b64encode('foobar'); // Zm9vYmFy
?????????????????Щ??????????????????????????????л????? Node ???????????????????????汾??Browserify ?? Webpack ????????????? process.browser ????????????? true?????????????????????￡???????? Node ???????η??? false???????????????????
if (process.browser) {
module.exports = function (string) {
return btoa(string);
};
} else {
module.exports = function (string) {
return Buffer.from(string?? 'binary').toString('base64');
};
}
??????????????????????????????? index.js?????? npm publish????????????????????????????????Ч????????????????????????????????????
???????????? index.js ?????????? Node ????? process ?? Buffer ?????????Browserify ?? Webpack ??????????? ?? polyfill????????????????Щ??顣
????????????????????飬????????￡? Browserify ?? Webpack ???? ?????????? 24.7KB ??? (7.6KB min+gz)????????????????????????????????????????????? btoa ?????????
????“browser” ??Σ??????????
??????????? Browserify ???? Webpack ??????????????????????????????? node-browser-resolve????????????? package.json ?? "browser" ??ε?淶??????????????????????汾????????????????????
????????????????????????????????μ???????? package.json??
{
/* ... */
"browser": {
"./index.js": "./browser.js"
}
}
?????????????????????????????index.js ?? browser.js??
// index.js
module.exports = function (string) {
return Buffer.from(string?? 'binary').toString('base64');
};
// browser.js
module.exports = function (string) {
return btoa(string);
};
??????????θ?????Browserify ?? Webpack ????? ???????????Browserify ?????????? 511 ????315 min+gz)??Webpack ?????????? 550 ????297 min+gz????
??????????????????????? npm ????? Node ?????? require('base64-encode-string') ???????? Node ??????????? Browserfy ?? Webpack ?????????????????????
???????? Rollup ????????е??????????????????????????Rollup ????????? rollup-plugin-node-resolve ????????? browser ????? true??
?????? jspm ??????????????ж? “browser” ??ε????????? jspm ?????????? require('base64-encode-string/browser') ???? jspm install npm:base64-encode-string -o "{main:'browser.js'}" ????????????????????????????????????????? package.json ?? ?????? “jspm” ??Ρ?
???????????
??????????????? "browser" ????????????ú?????????????????????????????? package.json ???????????????????ε????????????????? package.json ????????????
{
/* ... */
"browser": {
"./index.js": "./browser.js"??
"./widget.js": "./widget-browser.js"??
"./doodad.js": "./doodad-browser.js"??
/* etc. */
}
}
??????????????￡??κ???????????????????????????飬????????????????????????????? "browser" ???????????????????????????????????????????κζ?????
???????????????????????????С?????????????????????????????????????? if (process.browser) {} ??顣????Щ *-browser.js ?????????????????????????????ú????????
???????????????????????????????Щ?????????????????????????? Rollup ???????????????????????????????????? index.js ?? browser.js ?????????????????????????????黯?ж???????????????????
???????????????????? rollup ?? rollup-plugin-replace?????????? rollup.config.js ?????
import replace from 'rollup-plugin-replace';
export default {
entry: 'src/index.js'??
format: 'cjs'??
plugins: [
replace({ 'process.browser': !!process.env.BROWSER })
]
};
?????????????? process.env.BROWSER ??????????????????????? Node ???????л?????????
????????????????????????????е????????? src/index.js ????????????? process.browser ??????
export default function base64Encode(string) {
if (process.browser) {
return btoa(string);
} else {
return Buffer.from(string?? 'binary').toString('base64');
}
}
??????? prepublish ???????? package.json ??????????????
{
/* ... */
"scripts": {
"prepublish": "rollup -c > index.js && BROWSER=true rollup -c > browser.js"
}
}
????????????????????????
// index.js
'use strict';
function base64Encode(string) {
{
return Buffer.from(string?? 'binary').toString('base64');
}
}
module.exports = base64Encode;
// browser.js
'use strict';
function base64Encode(string) {
{
return btoa(string);
}
}
module.exports = base64Encode;
???????????Rollup ?????????? process.browser ????? true ???? false??????????Щ??????????????????????????????ж??? process ???? Buffer ?????á?
?????????????????????????????????????? process.browser ?л????????????????????С????е? index.js ?? browser.js ????????ж??? Node ??? Node ???????????????????????????????
??????????????????????????? Rollup ?????? ES ??鹹????IIFE ?????????? UMD ????????????????????????????????? marky???????????ж?? Rollup ???????????
?????????????????????????????base64-encode-string???????? ?????? npm ?? ???????????????????????????????????? ?? GitHub ???