发布一个npm 插件js包（方法集）

1
2
3
4
npm i babel-loader @babel/preset-env @babel/core @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -d
npm i clean-webpack-plugin@1.0.1 -d
npm install webpack@4.0.0 webpack-cli@3.3.12 -D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
let path = require("path"); //内置模块，相对路径解析成绝对路径
let webpack = require("webpack"); 引用webpack内置插件集合
let CleanWebpackPlugin = require("clean-webpack-plugin"); //打包去除原有的文件夹

module.exports = {
    mode: "production",
    entry: {
        home: "./src/index.js",
        // home: "./src/index1.js"
    }, //入口
    output: {
        filename: "bundle[name].js", //打包后得文件名  加上这个bundle[hash].js  产生一个哈希值
        path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
        globalObject: "this",
        library: "my_func_yyy",
        libraryTarget: "umd",
        umdNamedDefine: true,
    },

    plugins: [
        // 打包去除原有的dist  具体配置可以看这个文档https://www.qdtalk.com/2018/11/17/clean-webpack-plugin/
        new CleanWebpackPlugin(["dist"], {
            exclude: ["dll"],
        }),
    ],
    // 模块加载
    module: {
        // noParse: /jquery/, //不需要解析的插件里面的依赖关系， 比如bootstrap中就有依赖关系  多个/jquery|lodash/,
        // loader 模块加载器
        rules: [
            // js语法转换
            {
                test: /.js$/,
                // use: "Happypack/loader?id=js",
                use: {
                    loader: "babel-loader",
                    options: {
                        // 插件库，预设
                        presets: [
                            "@babel/preset-env", //js es6语法转换
                        ],
                        plugins: [
                            [
                                "@babel/plugin-proposal-decorators",
                                { legacy: true },
                            ], //语法 @log 装饰器 转换
                            "@babel/plugin-proposal-class-properties", //转换 class   es7语法使用@babel/polyfill,全局require
                            "@babel/plugin-transform-runtime", //可以转换异步得语法，比如promise, 做了简单得优化，比如抽离公共得部分
                        ],
                    },
                },
                include: path.resolve(__dirname, "src"), //只在src下找
                // exclude:/node_modules/,             //排除。。。。
            },
        ],
    },
};

1
2
3
4
5
6
7
8
9
export let getNum = () => {
    alert("npm发布得webpack_func插件中得getNum方法");
};

export let getMaxNum = () => {
    alert("npm发布得webpack_func插件中得getMaxNum方法");
};

1
2
3
4
5
6
7
8
export let getList = () => {
    alert("npm发布得webpack_func2插件中得getList方法");
};

export let printPage = () => {
    alert("npm发布得webpack_func2插件中得printPage方法");
};

1
2
3
4
import * as webpack_func1 from "./func1/index";
import * as webpack_func2 from "./func2/index";
export { webpack_func1, webpack_func2 };