（二）像NPM上发布一个自己的安装包怎么样？

Posted on 2020-04-22 17:27  昭冥大人呀  阅读(187)  评论(0)    收藏  举报

首先，注册一个npm（https://www.npmjs.com/）账号，记得验证邮箱，这一步跳过

 

第二步，阅读webpack官方文档创建libary一节，（https://www.webpackjs.com/guides/author-libraries/），我们把上一节的demo根据官方示例进行改造

 

第三步，修改构建文件build/build.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpackPluginTemplateContent = `
    <html>
      <body>
        <h1>wf-first-vue.js</h1>
        <span id="app"></span>
        <script>
            console.log(WfVue)
        </script>
      </body>
    </html>
`
module.exports = {
    mode: 'production',
    entry: {
        app: './src/index.js'
    },
    plugins: [],
    output: {
        filename: 'wf-first-vue.js',
        path: path.resolve(__dirname, '../dist'),
        library: 'wf_vue',
        libraryTarget: 'umd'
    },
    externals: {
        lodash: {
           commonjs: 'lodash',
             commonjs2: 'lodash',
             amd: 'lodash',
             root: '_'
        }
    },
    /*plugins: [new HtmlWebpackPlugin({
        templateContent: htmlWebpackPluginTemplateContent
    })],*/
    module: {
        /*rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]*/
    },
    devServer: {
        contentBase: './dist',
        hot: true
    }
}

修改入口文件src/index.js

import _ from 'lodash'
const numRef  = [{
    "num": 1,
    "word": "One"
}, {
    "num": 2,
    "word": "Two"
}, {
    "num": 3,
    "word": "Three"
}, {
    "num": 4,
    "word": "Four"
}, {
    "num": 5,
    "word": "Five"
}, {
    "num": 0,
    "word": "Zero"
}]
export function numToWord(num) {
    return _.reduce(numRef, (accum, ref) => {
        return ref.num === num ? ref.word : accum;
    }, '');
};

export function wordToNum(word) {
    return _.reduce(numRef, (accum, ref) => {
        return ref.word === word && word.toLowerCase() ? ref.num : accum;
    }, -1);
};

修改package.json的入口文件main

 

 第三步，执行npm run build，进行打包，

然后执行 npm login 登陆

最后执行npm publish发布，到这里我们的安装包就已经发不好了

看一下效果：

 

 

最后我们测试一下我们的安装包，

1，将我们的打包结果直接在HTML中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/lodash"></script>
    <script src="../dist/wf-first-vue.js"></script>
</head>
<body>
    <script>
        console.log(wf_vue)
        console.log(wf_vue.numToWord(2))
        console.log(wf_vue.wordToNum('three'))
    </script>
</body>
</html>

结果：正常

 

 

通过es和commonjs方式

import * as wf_vue from 'wf-first-vue'
const wf = require('wf-first-vue')
console.log('wf-vue', wf_vue.numToWord(3), wf.numToWord(2))
正常