README

webpack 打包库和组件

需要打包压缩版和非压缩版

支持AMD/CJS/ESM 模块引入

支持的使用方式

1.支持ES module

import * as sodaLargeNumber from 'soda-large-number';
// ...
sodaLargeNumber.add('999','1');

2.支持CJS

const sodaLargeNumber = require('soda-large-number');
// ...
sodaLargeNumber.add('999','1');

3.支持AMD

require((['soda-large-number'], function(sodaLargeNumber){
    // ...
    sodaLargeNumber.add('999','1');
}))

4.支持直接通过script引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://...../soda-large-number"></script>
</head>
<body>
    <script>
        sodaLargeNumber('999', '1');
    </script>
</body>
</html>

将库暴露出去

library: 制定库的全局变量

libraryTarget: 支持库的引入方式

module.exports = {
    mode: "production",
    entry: {
        "large-number": "./src/index.js",
        "large-number.min": "./src/index.js"
    },
    output: {
        filename: "[name].js",
        library: "largeNumber",
        libraryExport: "default",
        libraryTarget: "umd"
    }
}

具体步骤

安装webpack

npm i -D webpack webpack-cli

创建 webpack.config.js

创建 src/index.js

uglify 不会压缩ES6语法，terser-webpack-plugin 为 webpack4默认插件

webpack.config.js

'use strict'
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: {
        'soda-large-number': './src/index.js',
        'soda-large-number.min': './src/index.js'
    },
    output: {
        filename: '[name].js',
        library: 'sodaLargeNumber', // 库的名字
        libraryTarget: 'umd',
        libraryExport: 'default' //若不设置 需要 sodaLargeNumber.default()
    },
    mode: "none",
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/
            })
        ]
    }
}

配置不同环境下的导出语句 index.js

if (process.env.NODE_ENV === 'production') {
    module.exports = require('./dist/soda-large-number.min');
} else {
    module.exports = require('./dist/soda-large-number');
}

发布

npm login
npm publish
//注意切换 taobao镜像为 npm

Usage no npm install needed!