:rocket: :airplane: :bullettrain_side: free CDN for everyone who wants to speed his website freely!:smile:
Home Page: https://cdn.xgqfrms.xyz/
License: Apache License 2.0
https://gist.github.com/xgqfrms/
作者：xgqfrms
链接：https://www.cnblogs.com/xgqfrms/p/15930870.html
来源：https://www.cnblogs.com
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
©xgqfrms 2012-2022
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究
wat 是 WebAssembly 有一个基于 S-表达式的文本表示形式
wast 是用于测试的 wat, 是 wat 的超集
https://mbebenita.github.io/WasmExplorer/
(module
(export "sqrt" (func $sqrt))
(func $sqrt
(param $num f32)
(result f32)
(f32.sqrt (get_local $num))
)
)
https://github.com/xgqfrms/cdn/blob/gh-pages/webassembly/readme.md
https://info.flagcounter.com/QIXi
<div>
<a href="https://info.flagcounter.com/QIXi"><img src="https://s11.flagcounter.com/count2/QIXi/bg_000000/txt_00FF00/border_FF00FF/columns_3/maxflags_12/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
</div>???
Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided
https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url
https://visdap.blogspot.com/2018/12/chrome-update-failed-to-execute.html
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
url?raw=true
url
https://elementui.github.io/issue-generator/#/zh-CN
Issue 预览
Element UI version
2.15.7
OS/Browsers version
macOS/Chrome
Vue version
2.6.14
Reproduction Link
https://codepen.io/xgqfrms/pen/PoOmpjN?editors=1111
Steps to reproduce
open https://element.eleme.io/#/zh-CN/component/button
click 'Try it!' create a codepen demo
the demo not work at all, console get error info:
Uncaught ReferenceError: Vue is not defined at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-5b5fa04e-e23a-b638-52da-2602754aac7c:1
my solution
https://codepen.io/xgqfrms/pen/PoOmpjN?editors=1111
What is Expected?
codepen demo work
What is actually happening?
codepen demo not work
cdn/highstock/6.0.1/highstock.js
https://github.com/gildata/RAIO/issues/188
https://github.com/gildata/RAIO/issues/183#issuecomment-337130219
Twitter Card
可用枚举值：“summary”, “summary_large_image”, “app”, or “player”.
https://twittercommunity.com/t/error-invalid-card-name-card-error/24763
https://cards-dev.twitter.com/validator
- <meta name="twitter:card" content="https://cdn.xgqfrms.xyz/logo/logo.png">
+ <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@https://cdn.xgqfrms.xyz">
<meta name="twitter:title" content="free CDN">
<meta name="twitter:description" content="free CDN for everyone who wants speed his website!">
<meta name="twitter:creator" content="@xgqfrms">
<meta name="twitter:image" content="https://cdn.xgqfrms.xyz/logo/logo.png">
<meta name="twitter:domain" content="cdn.xgqfrms.xyz">
在线搜索 emoji icon ! 😄
emoji
import Vue from 'vue';
import router from '@/routers/index';
import App from '@/views/app.vue';
import store from '@/store/index';
import ElementUI from 'element-ui';
import moment from 'moment';
import VueClipboard from 'vue-clipboard2';
// js
import '@/filters';
import '@/components';
import '@/utils/sentry';
// css
import 'animate.css';
import 'element-ui/lib/theme-chalk/display.css';
import 'font-awesome/css/font-awesome.min.css';
import '@/styles/app.scss';/**
* @description OOPMT: OOP_Modules_Tempalte v1.1.1 (2017-11-01)
* @author xgqfrms
*
* @copyright 2017-present
* @license MIT
*/
'use strict';
(function(root, factory) {
if (typeof module === 'object' && module.exports) {
module.exports = root.document ?
factory(root) :
factory;
} else {
root.OOPMT = factory(root);
}
}(typeof window !== 'undefined' ? window : this, function(win) {
console.log(`win = this \n`, win);
// IIFE
var OOPMT = (function() {
/**
* (c) 2010-2017 xgqfrms
*
* License: www.OOPMT.com/license
*/
/* global win */
var doc = win.document,
SVG_NS = 'http://www.w3.org/2000/svg',
userAgent = (win.navigator && win.navigator.userAgent) || '',
svg = doc && doc.createElementNS && !!doc.createElementNS(SVG_NS, 'svg').createSVGRect,
isMS = /(edge|msie|trident)/i.test(userAgent) && !win.opera,
isFirefox = /Firefox/.test(userAgent),
hasBidiBug = isFirefox && parseInt(userAgent.split('Firefox/')[1], 10) < 4; // issue #38
var OOPMT = win.OOPMT ? win.OOPMT.error(16, true) : {
product: 'OOPMT',
version: '6.0.2',
deg2rad: Math.PI * 2 / 360,
doc: doc,
hasBidiBug: hasBidiBug,
hasTouch: doc && doc.documentElement.ontouchstart !== undefined,
isMS: isMS,
isWebKit: /AppleWebKit/.test(userAgent),
isFirefox: isFirefox,
isTouchDevice: /(Mobile|Android|Windows Phone)/.test(userAgent),
SVG_NS: SVG_NS,
chartCount: 0,
seriesTypes: {},
symbolSizes: {},
svg: svg,
win: win,
marginNames: ['plotTop', 'marginRight', 'marginBottom', 'plotLeft'],
noop: function() {
return undefined;
},
/**
* An array containing the current chart objects in the page. A chart's
* position in the array is preserved throughout the page's lifetime. When
* a chart is destroyed, the array item becomes `undefined`.
* @type {Array.<OOPMT.Chart>}
* @memberOf OOPMT
*/
charts: []
};
return OOPMT;
}());
// IIFE & OOPMT
(function(H) {
/**
* (c) 2010-2017 xgqfrms
*
* License: www.OOPMT.com/license
*/
var each = H.each,
isNumber = H.isNumber,
map = H.map,
merge = H.merge,
pInt = H.pInt;
/**
* @typedef {string} ColorString
* A valid color to be parsed and handled by OOPMT. OOPMT internally
* supports hex colors like `#ffffff`, rgb colors like `rgb(255,255,255)` and
* rgba colors like `rgba(255,255,255,1)`. Other colors may be supported by the
* browsers and displayed correctly, but OOPMT is not able to process them
* and apply concepts like opacity and brightening.
*/
/**
* Handle color operations. The object methods are chainable.
* @param {String} input The input color in either rbga or hex format
*/
H.Color = function(input) {
// Backwards compatibility, allow instanciation without new
if (!(this instanceof H.Color)) {
return new H.Color(input);
}
// Initialize
this.init(input);
};
H.Color.prototype = {
// Collection of parsers. This can be extended from the outside by pushing parsers
// to OOPMT.Color.prototype.parsers.
parsers: [{
// RGBA color
regex: /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]?(?:\.[0-9]+)?)\s*\)/,
parse: function(result) {
return [pInt(result[1]), pInt(result[2]), pInt(result[3]), parseFloat(result[4], 10)];
}
}, {
// RGB color
regex: /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/,
parse: function(result) {
return [pInt(result[1]), pInt(result[2]), pInt(result[3]), 1];
}
}],
// Collection of named colors. Can be extended from the outside by adding
// colors to OOPMT.Color.prototype.names.
names: {
none: 'rgba(255,255,255,0)',
white: '#ffffff',
black: '#000000'
},
/**
* Parse the input color to rgba array
* @param {String} input
*/
init: function(input) {
var result,
rgba,
i,
parser,
len;
this.input = input = this.names[
input && input.toLowerCase ?
input.toLowerCase() :
''
] || input;
// Gradients
if (input && input.stops) {
this.stops = map(input.stops, function(stop) {
return new H.Color(stop[1]);
});
// Solid colors
} else {
// Bitmasking as input[0] is not working for legacy IE.
if (input && input.charAt && input.charAt() === '#') {
len = input.length;
input = parseInt(input.substr(1), 16);
// Handle long-form, e.g. #AABBCC
if (len === 7) {
rgba = [
(input & 0xFF0000) >> 16,
(input & 0xFF00) >> 8,
(input & 0xFF),
1
];
// Handle short-form, e.g. #ABC
// In short form, the value is assumed to be the same
// for both nibbles for each component. e.g. #ABC = #AABBCC
} else if (len === 4) {
rgba = [
((input & 0xF00) >> 4) | (input & 0xF00) >> 8,
((input & 0xF0) >> 4) | (input & 0xF0),
((input & 0xF) << 4) | (input & 0xF),
1
];
}
}
// Otherwise, check regex parsers
if (!rgba) {
i = this.parsers.length;
while (i-- && !rgba) {
parser = this.parsers[i];
result = parser.regex.exec(input);
if (result) {
rgba = parser.parse(result);
}
}
}
}
this.rgba = rgba || [];
},
/**
* Return the color a specified format
* @param {String} format
*/
get: function(format) {
var input = this.input,
rgba = this.rgba,
ret;
if (this.stops) {
ret = merge(input);
ret.stops = [].concat(ret.stops);
each(this.stops, function(stop, i) {
ret.stops[i] = [ret.stops[i][0], stop.get(format)];
});
// it's NaN if gradient colors on a column chart
} else if (rgba && isNumber(rgba[0])) {
if (format === 'rgb' || (!format && rgba[3] === 1)) {
ret = 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')';
} else if (format === 'a') {
ret = rgba[3];
} else {
ret = 'rgba(' + rgba.join(',') + ')';
}
} else {
ret = input;
}
return ret;
},
/**
* Brighten the color
* @param {Number} alpha
*/
brighten: function(alpha) {
var i,
rgba = this.rgba;
if (this.stops) {
each(this.stops, function(stop) {
stop.brighten(alpha);
});
} else if (isNumber(alpha) && alpha !== 0) {
for (i = 0; i < 3; i++) {
rgba[i] += pInt(alpha * 255);
if (rgba[i] < 0) {
rgba[i] = 0;
}
if (rgba[i] > 255) {
rgba[i] = 255;
}
}
}
return this;
},
/**
* Set the color's opacity to a given alpha value
* @param {Number} alpha
*/
setOpacity: function(alpha) {
this.rgba[3] = alpha;
return this;
},
/*
* Return an intermediate color between two colors.
*
* @param {OOPMT.Color} to
* The color object to tween to.
* @param {Number} pos
* The intermediate position, where 0 is the from color (current
* color item), and 1 is the `to` color.
*
* @return {String}
* The intermediate color in rgba notation.
*/
tweenTo: function(to, pos) {
// Check for has alpha, because rgba colors perform worse due to lack of
// support in WebKit.
var fromRgba = this.rgba,
toRgba = to.rgba,
hasAlpha,
ret;
// Unsupported color, return to-color (#3920, #7034)
if (!toRgba.length || !fromRgba || !fromRgba.length) {
ret = to.input || 'none';
// Interpolate
} else {
hasAlpha = (toRgba[3] !== 1 || fromRgba[3] !== 1);
ret = (hasAlpha ? 'rgba(' : 'rgb(') +
Math.round(toRgba[0] + (fromRgba[0] - toRgba[0]) * (1 - pos)) +
',' +
Math.round(toRgba[1] + (fromRgba[1] - toRgba[1]) * (1 - pos)) +
',' +
Math.round(toRgba[2] + (fromRgba[2] - toRgba[2]) * (1 - pos)) +
(
hasAlpha ?
(
',' +
(toRgba[3] + (fromRgba[3] - toRgba[3]) * (1 - pos))
) :
''
) +
')';
}
return ret;
}
};
H.color = function(input) {
return new H.Color(input);
};
}(OOPMT));
// return Object
return OOPMT;
}));
/*
'use strict';
// window/this, function
(function(root, factory) {
// module & module.exports
if (typeof module === 'object' && module.exports) {
// window.document/this.document ? function( window/this) : function
module.exports = root.document ? factory(root) : factory;
} else {
// window.OOPMT/this.OOPMT ? function(window/this)
root.OOPMT = factory(root);
}
}(typeof window !== 'undefined' ? window : this, function(win) {
console.log(`win = this \n`, win);
// return Object
return OOPMT;
}));
*/memory cache
disk cache
请求时浏览器缓存 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中?
demo
name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
- run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
- run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
- name: Check out repository code
uses: actions/checkout@v3
- run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
- run: echo "🖥️ The workflow is now ready to test your code on the runner."
- name: List files in the repository
run: |
ls ${{ github.workspace }}
- run: echo "🍏 This job's status is ${{ job.status }}."
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
https://github.com/mdn/web-speech-api
https://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/
https://mdn.github.io/web-speech-api/speak-easy-synthesis/
https://stackoverflow.com/questions/38529098/enable-web-speech-api-on-mozilla-firefox
https://developer.mozilla.org/zh-CN/
.babelrc
{
"presets": ["es2015"],
"plugins":["transform-object-rest-spread"]
}
"presets": ["es2015"]
query: {
presets: ['es2015'],
}
options: {
modules: true
}
https://weblogs.asp.net/dwahlin/getting-started-with-es6-%E2%80%93-transpiling-es6-to-es5
https://github.com/danwahlin/es6samples
https://webpack.js.org/concepts/loaders/
https://webpack.js.org/loaders/babel-loader/#src/components/Sidebar/Sidebar.jsx
https://webpack.js.org/loaders/
https://babeljs.io/docs/usage/api/#options
https://babeljs.io/docs/plugins/#presets
Each yearly preset only compiles what was ratified in that year.
babel-preset-env replaces es2015, es2016, es2017, latest
https://babeljs.io/docs/plugins/preset-es2015/
https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/
.babelrc
{
"plugins": ["transform-es2015-arrow-functions"]
}
{
"plugins": [
["transform-es2015-arrow-functions", { "spec": true }]
]
}
// https://babeljs.io/docs/plugins/preset-es2015/
{
"presets": ["es2015"]
}
// "amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".
// boolean, defaults to false.
// boolean, defaults to false.
{
"plugins": [
["transform-es2015-arrow-functions", { "spec": true }]
]
}
$ npm i -D babel-cli babel-preset-es2015
https://babeljs.io/docs/usage/cli/
https://babeljs.io/docs/usage/api/#options
https://webpack.js.org/configuration/module/#rule-options-rule-query
parser: {
amd: false, // disable AMD
commonjs: false, // disable CommonJS
system: false, // disable SystemJS
harmony: false, // disable ES2015 Harmony import/export
requireInclude: false, // disable require.include
requireEnsure: false, // disable require.ensure
requireContext: false, // disable require.context
browserify: false, // disable special handling of Browserify bundles
requireJs: false, // disable requirejs.*
node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
node: {...} // reconfigure node layer on module level
}https://moduscreate.com/blog/optimizing-react-es6-webpack-production-build/
{
"presets": ["es2015", "react"]
}
// query: {
// presets: ['es2015'],
// }
// "presets": ["es2015"]
// .babelrc
# webpack 3.x | babel-loader 8.x | babel 7.x
$ npm i -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
# webpack 3.x babel-loader 7.x | babel 6.x
$ npm i -D babel-loader babel-core babel-preset-env webpack
$ npm i -D babel-plugin-transform-runtime
$ npm i -S babel-runtime
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['preset-env'],
// presets: ['@babel/preset-env'],
// plugins: [require('@babel/plugin-transform-object-rest-spread')]
// plugins: ['@babel/transform-runtime']
}
}
}
]
}https://moduscreate.com/blog/optimizing-react-es6-webpack-production-build/
https://stackoverflow.com/questions/36986133/couldnt-find-preset-es2015-relative-to-directory
{
"presets": ["preset-env"]
}
https://doc.webpack-china.org/configuration/
https://webpack.js.org/configuration/
https://webpack.js.org/configuration/module/#rule-use
https://webpack.js.org/configuration/module/#rule-loader
https://webpack.js.org/configuration/module/#module-rules
https://webpack.js.org/configuration/module/#useentry
https://webpack.js.org/configuration/module/#rule-test
{
loader: "css-loader",
options: {
modules: true
}
}
http://www.css88.com/doc/webpack/loaders/babel-loader/
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}https://babeljs.io/docs/plugins/preset-env
https://babeljs.io/docs/plugins/preset-env#examples
{
"presets": ["env"]
}
{
"presets": [
[
"env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}
]
]
}
{
"presets": [
[
"env", {
"targets": {
"node": "6.10"
}
}
]
]
}
{
"presets": [
[
"env", {
"targets": {
"node": "current"
}
}
]
]
}
{
"presets": [
[
"env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
},
"include": ["transform-es2015-arrow-functions", "es6.map"],
"exclude": ["transform-regenerator", "es6.set"]
}
]
]
}
https://babeljs.io/docs/plugins/preset-env#examples
{
"presets": [
[
"env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions", "safari >= 7"]
},
"include": ["transform-es2015-arrow-functions", "es6.map"],
"exclude": ["transform-regenerator", "es6.set"],
"modules": false,
"useBuiltIns": true,
"debug": true,
"loose": true
}
]
]
}
https://babeljs.io/docs/plugins/transform-object-rest-spread/
https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread
$ npm i -D babel-plugin-transform-object-rest-spread
{
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}
{
"presets": ["env"],
"plugins": ["transform-object-rest-spread"]
}
https://babeljs.io/docs/plugins/syntax-object-rest-spread/
This plugin only allows Babel to parse this syntax.
$ npm i -D babel-plugin-syntax-object-rest-spread
$ browser-sync start --server --files "./*.*"
$ browser-sync start --server --files "./000-xyz/*.*"
# babel
$ npm i -D babel babel-cli babel-preset-env babel-polyfill babel-preset-react
# webpack
$ npm i -D webpack babel-loader babel-core
$ npm i -D uglifyjs-webpack-plugin html-webpack-plugin clean-webpack-plugin
# css/sass
$ npm i -D style-loader css-loader sass-loader
# AMD/Commonjs
$ npm i -S requirejs systemjs
$ npm i -D es-module-loader
$ npm i -D browserify
https://www.sitepoint.com/modular-javascript-systemjs-jspm/
https://github.com/systemjs/plugin-babel
https://github.com/systemjs/systemjs
https://github.com/ModuleLoader/es-module-loader
https://github.com/ModuleLoader/browser-es-module-loader
https://github.com/ModuleLoader/browser-es-module-loader/blob/master/package.json
"devDependencies": {
"rollup": "^0.34.7",
"babel-core": "^6.22.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-systemjs": "^6.22.0",
"browserify": "^13.1.0",
"es-module-loader": "^2.0.0",
"rollup-plugin-node-resolve": "^2.0.0"
},
"scripts": {
"prepublish": "npm run build",
"build": "mkdir -p dist && browserify src/index.js > dist/bundle.min.js && rollup -c"
}
/usr/local/apache2/webapps/information
/usr/local/apache2/webapps/information/reportinfo
/usr/local/apache2/webapps/information/bulletininfo
face, 😑 😩 🤖 🦊 😒 😧 😟 🐭 🐻 🤓 😪 🦁 🐹 😌 😢 😠 🤗 🐮 😞
https://emojipedia.org/search/?q=face
http://localhost:3000/000-xyz/modal/index.html
??? proxy ???
http://10.1.5.202/information/newsinfo/
http://10.1.5.202/queryservice/news/content/564082427896
// 研报 摘要
http://10.1.5.202/webservice/researchreport/research/zy/551173471225
{
"Title": "温州宏丰:实控人增持过程中误操作 出现短线交易",
"Id": 564082427896,
"Content": " 证券时报网11月15日讯 温州宏丰(300283)11月15日晚间公告,实际控制人、董事长陈晓近期集中竞价方式增持公司53.86万股,增持比例0.13%;在增持过程中因误操作,出现了短线交易,错误委托卖出公司股票 5万股。截至公告日,陈晓持股比例58.43%。\n",
"PublishDate": "2017-11-15 17:34:52",
"Infosource": "证券时报网",
"Url": "http://kuaixun.stcn.com/2017/1115/13771960.shtml"
}
字体：大 中 小 12px 14px 16px
Blockchain Fundamentals
solidity
.sol
Introduction to Bitcoin and Decentralized Technology
https://medium.freecodecamp.org/lets-learn-javascript-closures-66feb44f6a44#.dr9v9ufob
Currying
function add(x) {
// x = 1
console.log(`first outer function argument x =`, x);
return function (y) {
// y = 41
console.log(`second inner function argument y =`, y);
return x + y;
};
}
const incremenent1 = add(1);
increment1(41); // 42此功能目前无法在任何浏览器中实现。(这个功能刚刚开始在本地浏览器中实现。)
它在许多转换器中实现，例如 Traceur Compiler ， Babel ， Rollup 或 Webpack。
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";此特性目前仅在 Safari 和 Chrome 原生实现。
它在许多转换器中实现，如 Traceur Compiler，Babel， Rollup 或 Webpack。
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, function
export let name1 = …, name2 = …, …, nameN; // also var, const
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
$ browser-sync start --server --files "./fast-preview/."
https://babeljs.io/
https://babeljs.io/docs/setup
# all in one
$ npm i -D babel babel-cli babel-preset-env babel-polyfill babel-preset-react
$ npm i -D babel-cli babel-preset-env
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-env
$ npm install --save-dev babel-polyfill
$ npm install --save-dev babel-preset-react
# webpack
$ npm i -D babel-loader babel-core
$ npm install --save-dev babel-loader babel-core
# css/sass
$ npm i -D style-loader css-loader sass-loader
$ npm i -D uglifyjs-webpack-plugin html-webpack-plugin clean-webpack-plugin
const path = require('path');
const webpack = require('webpack'); //to access built-in plugins
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
https://babeljs.io/users/
https://github.com/babel/website/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aclosed+%22New+User%3A%22
https://jakearchibald.github.io/svgomg/
https://babeljs.io/docs/setup#installation
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>https://babeljs.io/docs/setup#installation
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"build": "babel src -d lib"
},
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
// https://webpack.js.org/concepts/
https://github.com/webpack/webpack
https://doc.webpack-china.org/
$ npm install --save-dev babel-loader babel-core
# webpack 3.x | babel-loader 8.x | babel 7.x
$ npm install [email protected] @babel/core@next @babel/preset-env@next webpack
# webpack 3.x babel-loader 7.x | babel 6.x
$ npm install babel-loader babel-core babel-preset-env webpack
# ES7 class-properties
$ npm install --save-dev babel-plugin-transform-class-properties
https://github.com/babel/babel-loader
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-transform-object-rest-spread')]
}
}
}
]
}打包器 bundler，负责将有依赖关系的多个 module 打包成 一个或多个 bundle。
webpack/browserify
加载器 loader，负责将各种不同格式形式的 module，加载成浏览器能识别的 module 形式。
system.js/require.js
module 格式形式， AMD, CMD (commonjs), UMD，ES6 module(ES2015/ES2016/ES2017 ...),
https://rollupjs.org/
https://rollupjs.org/repl
https://github.com/rollup/rollup
https://gulpjs.com/
https://github.com/gulpjs/gulp
https://gruntjs.com/
https://github.com/gruntjs/grunt
https://webpack.js.org/concepts/
https://github.com/webpack/webpack
https://doc.webpack-china.org/
http://www.requirejs.org/
http://www.requirejs.org/docs/start.html
http://www.requirejs.org/docs/download.html#requirejs
$ npm i -g requirejs
$ npm i -S requirejs
$ npm i -D requirejs
http://www.requirejs.org/docs/jquery.html#modulename
https://github.com/requirejs/requirejs/wiki/Upgrading-to-RequireJS-2.0
https://github.com/browserify/browserify
$ npm i -g browserify
$ npm i -S browserify
$ npm i -D browserify
Asynchronous Module Definition API
https://github.com/amdjs/amdjs-api/wiki/AMD
https://github.com/amdjs/amdjs-api/wiki/AMD-(中文版)
https://github.com/amdjs/amdjs-api/wiki/require
https://github.com/amdjs/amdjs-api/wiki/require-(中文版)
http://wiki.commonjs.org/wiki/CommonJS
http://wiki.commonjs.org/wiki/Modules/1.1.1
http://wiki.commonjs.org/wiki/Modules/Transport
http://wiki.commonjs.org/wiki/Modules/Async/A
https://github.com/commonjs/commonjs
http://commonjs.org/
http://www.requirejs.org/docs/commonjs.html
http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
https://www.gigmasters.com/mobile-dj/cmdjs
https://www.linkedin.com/pulse/amd-vs-common-js-umd-damodaran-sathyakumar
http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules/
http://tagneto.blogspot.com/2012/01/reply-to-tom-on-amd.html
http://unscriptable.com/2011/09/30/amd-versus-cjs-whats-the-best-format/
https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/
https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc
https://github.com/Medium
https://medium.com/@GitHub
// %2f38638210%2f
decodeURI(`%2f38638210%2f`);
// "%2f38638210%2f"
decodeURIComponent(`%2f38638210%2f`);
// "/38638210/"https://babeljs.io/docs/plugins/transform-class-properties/
https://babeljs.io/docs/plugins/transform-object-rest-spread
plugins: [require('@babel/plugin-transform-class-properties')]
plugins: [require('@babel/plugin-transform-object-rest-spread')]
plugins: [require('@babel/plugin-transform-class-properties'), require('@babel/plugin-transform-object-rest-spread')]CommonJS (systemjs)
AMD (requirejs)
// no dependency
define([], function(){
function funcA() {
//
};
return {
funcA: funcA
};
});
// dependency
// no need `.js`
define(['a', 'b', ...], function(a, b){
//
});commonjs
// no dependency
var ABC = "";
function fucA() {
// m
}
exports.fucA = fucA;
exports.ABC = ABC;
// dependency
const ma = require(`a.js`);
const mb = require(`b.js`);
function fucA() {
// ma
}
function fucB() {
// mnb
}
// exports.fucA = fucA;
// exports.fucB = fucB;
module.exports = {
fucA: fucA,
fucB: fucB
};
// module.exports === exports !!!// module format
System.config({
meta: {
format: 'cjs'
}
});
// entry js
System.import('js/app.js');
/*
# CJS !== CMD
> CommonJS
> CMD seajs(smg ???)
*/UMD
JS build-in
module.exports === exports
https://web.dev/samesite-cookies-explained/?utm_source=devtools
JSON Web Tokens
https://en.wikipedia.org/wiki/JSON_Web_Token#Structure
https://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for/201510#201510
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
