at Keio University Lecturer at Chuo University dynamis @ Community Twitter: @dynamitter facebook.com/dynamis speakerdeck.com/dynamis note: my avatar is red panda (fire fox, lesser panda) 2 @
pro t org for Web, Browser, Openness Research & Consulting Research using Browsers (network, user behavior etc.) Building custom Browsers (Chromium, Firefox) Porting Browsers (for Embedded Devices etc) Human resource development & Event produce Web & Open education for students and youth Educating Engineers of Web, IoT and relating techs note: in 2017 "Mozilla Japan" renamed to "WebDINO Japan" https://www.webdino.org/ 3
maybe every attendees Know the License of React Don't violate the OSS license Know what you must do for MIT, BSD, Apache licence Keep license comment in your production code List up the license of all the modules and sub modules Con rm the license notice of each modules and sub modules Know about the license violation issue of Create React Apps Know about the license violation issue of o cial React release 7
sourced during the JSConfUS 2013 (with BSD + Patents license) Jul 2017: AFS moved Facebook BSD + Patents license to Category X (can not include) Aug 2017: Facebook explained about the license Sep 2017: React 16 (and 15.6.2) or later fainally relicensed under the MIT License 10
its affiliates. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11
(c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefi ...snip... Of course better to add separate license file or UI to show the full list of OSS software. 13
tool to create React apps "Set up a modern web app by running one command." > npx create-react-app cra-app > cd cra-app > yarn > yarn build Have you ever used CRA for your apps? 16
new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function() {try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNa mes(e)[0])return!1;for(var t={},n=0;n<10;n+ +)t["_"+String.fromCharCode(n)]=n;if("0123456789"! ==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var ...snip... 17
violate MIT current CRA app will remove ALL the comments from the js les (and will not generate any license les) of course not intentional violation I believe terser-webpack-plugin option needed! CRA use terser to minify codes Terser have extractComments option to specify which comments will be extracted to a separate le /^\**!|@preserve|@license|@cc_on/i comments will be stored to script.js.LICENSE le 19
in production mode new TerserPlugin({ terserOptions: { ...snip... }, ...snip... parallel: !isWsl, // Enable file caching cache: true, sourceMap: shouldUseSourceMap, + extractComments: true, }), If you app have ejected, edit config/webpack.config.js in the same way. 21
@license React v16.12.0 * react.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** @license React v16.12.0 * react-dom.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** @license React v0.18.0 * scheduler.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 23
- by Sindre Sorhus react - by Facebook react-dom - by Facebook scheduler - by Facebook Only these??? If outputted code includes non-Facebook module code like object-assign, we need to include them 25
(c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* Modernizr 3.0.0pre (Custom Build) | MIT */ 'use strict';(function(la,m){"object"===typeof exports&&"und efined"!==typeof module?module.exports=m(require("react")):" ...snip... https://unpkg.com/browse/[email protected]/umd/react-dom.production.min.js 26
(c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ ...snip... /** * Checks if an event is supported in the current execution environment. * * NOTE: This will not work correctly for non-generic events such as `change`, * `reset`, `load`, `error`, and `select`. * * Borrows from Modernizr. * * @param {string} eventNameSuffix Event name, e.g. "click". * @return {boolean} True if the event is supported. * @internal * @license Modernizr 3.0.0pre (Custom Build) | MIT */ function isEventSupported(eventNameSuffix) { ...snip... https://unpkg.com/browse/[email protected]/umd/react-dom.development.js 27
Inc. and its affiliates (React and relating modules), Sindre Sorhus (object-assign included in React), Modernizr (Modernizr 3.0.0pre (Custom Build) included in React DOM) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. I'm not 100% sure if this is the complete list but I cannot find any other so far 29
Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefi ...snip... https://unpkg.com/browse/[email protected]/umd/react.development.js 33
(c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict';(function(v,m){"object"===typeof exports&&"undef ined"!==typeof module?module.exports=m():"function"===typeof define&&define.amd?define(m):v.React=m()})(this,function(){fu nction v(a){for(var b="https://reactjs.org/docs/error-decoder .html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+ ...snip... https://unpkg.com/browse/[email protected]/umd/react.production.min.js 35
includes license comment of object-assign react.production.min.js (NG) doesn't include license comment of object-assign (code of object-assign is included) If you use production artifact of React (hosted by unpkg), you're violating the MIT license (unless you include separate license le mentioning object-assign, not only React). issue filed: https://github.com/facebook/react/issues/17492 36
the npm modules or production modules installed in current dir will be listed. You can show list, count by license or output as csv/json le. note: this tool cannot automatically lter modules included in the build results (modules like web pack will be includes and you need to excludes them manually) https://github.com/davglass/license-checker 39
dynamis
cyberagentdevelopers
oracle4engineer
syntasso
trishagee
mikit
wa6sn
nssv
minorun365
isaoshimizu
niwatakeru
oztick139
eitanlees
swwweet
ammeep
holman
chrislema
skipperchong
addyosmani
lauravandoore
bkeepers
nonsquared
tammielis
![build/static/js/2.649357e4.chunk.js (this["webpackJsonpcra-noeject"]=this["webpackJsonpcra- noeject"]||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(5)},function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwn Property,a=Object.prototype.propertyIsEnumerable;functio n i(e){if(null===e||void 0===e)throw](https://files.speakerdeck.com/presentations/dccae66ef2834391ab8b5ccc00fd4bc7/slide_16.jpg){kind=link}
![build/static/js/2.a49946a1.chunk.js /*! For license information please see 2.a49946a1.chunk.js.LICENSE */ (this["webpackJsonpcra-noeject"]=this["webpackJsonpcra-](https://files.speakerdeck.com/presentations/dccae66ef2834391ab8b5ccc00fd4bc7/slide_21.jpg){kind=link}
