从零开始搭建一个npm包

初始化git

git init

增加gitignore文件

.gitignore

# See https://help.github.com/ignore-files/ for more about ignoring files.

.idea/
lib/
dist/

# dependencies
/node_modules
package-lock.json

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

初始化npm

npm init

增加npmignore文件

.npmignore

.idea/

# dependencies
/node_modules
package-lock.json

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

# configuration
rollup.config.js
tsconfig.json
webpack.config.js
.babelrc

增加readme文件

# <npm包名称XXX>

XXX作为XXX（比如umd）模块导出


## Introduction

介绍说明


## Using

如何使用


## License	

[MIT](http://opensource.org/licenses/MIT)

rollup

rollup所需的依赖

{
    "devDependencies": {
    	"rollup": "^1.19.4",
    	"rollup-plugin-babel": "^3.0.7",
    	"rollup-plugin-commonjs": "^10.0.2",
    	"rollup-plugin-css-porter": "^1.0.2",
    	"rollup-plugin-json": "^4.0.0",
    	"rollup-plugin-node-builtins": "^2.1.2",
    	"rollup-plugin-node-globals": "^1.4.0",
    	"rollup-plugin-node-resolve": "^5.2.0",
    	"rollup-plugin-terser": "^5.1.1",
    	"rollup-plugin-uglify": "^6.0.2"
  }
}

rollup配置文件

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import {uglify} from 'rollup-plugin-uglify';
import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import pkg from './package.json';
import css from 'rollup-plugin-css-porter';

const {version, name, author} = pkg;


const banner = `/*!
* ${name} v${version}
* (c) ${new Date().getFullYear()} ${author}
*/`;

export default [
	{
		input: 'index.js',
		plugins: [
			commonjs({
				// polyfill async/await
				'node_modules/@babel/runtime/helpers/asyncToGenerator.js': ['default']
			}),
			resolve({
				preferBuiltins: true,
				mainFields: false,
			}),
			babel({
				exclude: 'node_modules/**',
				runtimeHelpers: true
			}),
			globals(),
			builtins(),
			json({
				include: 'node_modules/**'
			}),
			css()
		],
		output: {
			file: `dist/${name}.js`,
			format: 'umd',
			name: `${name}`,
			banner,
		}
	},
	{
		input: 'index.js',
		plugins: [
			commonjs({
				// polyfill async/await
				'node_modules/@babel/runtime/helpers/asyncToGenerator.js': ['default']
			}),
			resolve({
				preferBuiltins: true,
				mainFields: false,
			}),
			babel({
				exclude: 'node_modules/**',
				runtimeHelpers: true,
			}),
			uglify(),
			terser(),
			globals(),
			builtins(),
			json({
				include: 'node_modules/**'
			}),
			css()
		],
		output: {
			file: `dist/${name}.min.js`,
			format: 'umd',
			name: `${name}-min`,
			banner,
		}
	},
	{
		input: 'index.js',
		plugins: [
			commonjs({
				// polyfill async/await
				'node_modules/@babel/runtime/helpers/asyncToGenerator.js': ['default']
			}),
			resolve({
				preferBuiltins: true,
				mainFields: false,
			}),
			babel({
				exclude: 'node_modules/**',
				runtimeHelpers: true,
			}),
			globals(),
			builtins(),
			json({
				include: 'node_modules/**'
			}),
			css()
		],
		output: [
			{
				file: `dist/${name}.es.js`,
				format: 'es',
				name: `${name}-es`,
				banner,
			},
			{
				file: `dist/${name}.cjs.js`,
				format: 'cjs',
				name: `${name}-cjs`,
				banner,
			}
		]
	},
];

// export default {
// 	input: 'index.js',
// 	output: {
// 		file: 'dist/js/main.min.js',
// 		format: 'umd',
// 		umd: true,
// 		name: 'bundle-name'
// 	},
// 	plugins: [
// 		uglify(),
// 		resolve({
// 			preferBuiltins: true,
// 			mainFields: ['browser']
// 		}),
// 		commonjs(),
// 		babel({
// 			exclude: 'node_modules/**',
// 			runtimeHelpers: true,
// 		}),
// 		json({
// 			include: 'node_modules/**'
// 		}),
// 		globals(),
// 		builtins()
// 	],
// }

babel

babel所需的依赖

{
    "devDependencies": {
        "@babel/core": "^7.5.5",
    	"@babel/plugin-transform-runtime": "^7.5.5",
    	"@babel/preset-env": "^7.5.5",
    	"babel-core": "^6.26.3",
    	"babel-plugin-external-helpers": "^6.22.0",
    	"babel-preset-latest": "^6.24.1",
    	"babel-upgrade": "^1.0.1"
  }
}

babel配置文件

{
  "presets": [
    ["latest", {
      "es2015": {
        "modules": false
      }
    }]
  ],
  "plugins": ["external-helpers"]
}