This post is not legal advice. By reading this post, you agree and acknowledge that this post does not advise you on how to properly license your work and you would not rely on this post to license your work; that this post does not advise licensees of open source work on how to comply with the licenses; and that this post only provides technical guidance on programming tasks that are common to licensing open source projects.

Most popular open source licenses require redistributors to retain the copyright and permission notices, among other things. For example, even the brief MIT License explicitly requires so:

…The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software…

However, without any automation, this simple task is not so simple for a browser (front-end) JavaScript project: Tens and even hundreds of open source dependencies are often bundled and minified into a single .js file. Then, this .js file is commonly distributed to browsers via the Internet.

As maintainers of open source JavaScript projects, what can we do to make retaining copyright and permission notices easier for dependent browser JavaScript projects?

Use the @license Tag

The answer is incredibly simple: Add the copyright and permission notices as comments to the top of each JavaScript source file, and then annotate the comment block with the @license tag, like this (assuming the MIT license):

/**
 * @license MIT
 * Copyright (c) 20xx My Name
 *
 * 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.
 */

The optional identifier after @license is usually an SPDX identifier. More sophisticated licenses usually come with instructions on what to put at the top of each file, such as

How Does It Work?

When a browser JavaScript project bundles the JavaScript source files from a dependent, it typically uses a minifier (directly or indirectly) to strip all comments from these source files. Under default settings, comment blocks annotated with @license are typically preserved by mainstream minifiers, including Terser, UglifyJS, babel-minify as in babel, and the Google Closure Compiler. Using these minifiers, if the packager of the browser project bundles and minifies all dependent JavaScript source files properly, the eventual .js file would contain the copyright and permission notices of JavaScript dependents.

Bonus: @license is also recognized by common documentation tools, such as JSDoc.