小程序接入NPM包開發(fā)實(shí)踐

微信小程序已經(jīng)支持NPM接入既鞠，這里指的是原汁原味的小程序開發(fā)晕翠，沒有用任何框架瞳浦。今天簡(jiǎn)單的記錄一下接入過程担映。

一、三個(gè)步驟

根目錄有package.json

根據(jù) package.json 的 dependencies 字段構(gòu)建叫潦，所以聲明在 devDependencies 里的包也可以在開發(fā)過程中被安裝使用而不會(huì)參與到構(gòu)建中蝇完。如果是這之前的版本，則建議使用--production選項(xiàng)，可以減少安裝一些業(yè)務(wù)無關(guān)的 npm 包短蜕，從而減少整個(gè)小程序包的大小氢架。

重點(diǎn)強(qiáng)調(diào)就是生產(chǎn)環(huán)境的包要放在dependencies中！Ｅ竽А岖研！

根目錄有node_moudles

此處并沒有強(qiáng)制要求 node_modules 必須在小程序根目錄下（即 project.config.js 中的 miniprogramRoot 字段），也可以存在于小程序根目錄下的各個(gè)子目錄中警检。但是不允許 node_modules 在小程序根目錄外孙援。

重點(diǎn)就是你必須提前npm install，這樣才能給小程序用扇雕。

手動(dòng)執(zhí)行構(gòu)建NPM包

image

第三步就是在微信開發(fā)者工具中拓售，手動(dòng)構(gòu)建NPM。需要保證前兩個(gè)步驟做完了哦镶奉。這個(gè)步驟其實(shí)就是小程序重新整理了一下node_moudles包础淤，構(gòu)建出來一個(gè)miniprogram_npm文件，其實(shí)里面放的才是我們npm執(zhí)行過程真正引用的包哨苛「胄祝可以理解為小程序版本的node_moudles。

官方文檔

二移国、開發(fā)NPM包

小程序的NPM包與普通NPM包的區(qū)別不大吱瘩，小小的區(qū)別就是，需要在package.json中增加一個(gè)參數(shù)miniprogram迹缀。參數(shù)指定的名字使碾，比如說是dist，那么在上述的手動(dòng)執(zhí)行構(gòu)建NPM包的過程中祝懂，小程序就會(huì)把npm包中dist的目錄給構(gòu)建一下票摇。

官方文檔：構(gòu)建過程中，小程序 npm 包會(huì)直接拷貝構(gòu)建文件生成目錄下的所有文件到 miniprogram_npm 中砚蓬。

其實(shí)也就dist目錄矢门。dist目錄要求是構(gòu)建文件，也就是說需要我們自己進(jìn)行構(gòu)建~ 這里我選擇了webpack進(jìn)行構(gòu)建灰蛙。

三祟剔、webpack構(gòu)建小程序自定義組件NPM包

NPM包開發(fā)除了純js包，其他的就是自定義組件（也就是component）摩梧。

自定義組件

自定義組件常見的格式物延，不知道可以看下下文檔~

在公司做項(xiàng)目，都是在別人搭好的架子上開發(fā)仅父。以至于自己使用WebPack的時(shí)候感覺真的懂得好少叛薯。悲傷/(ㄒoㄒ)/~~

這里遇到的最大的坑就是浑吟，一般我們就傳入給WebPack一個(gè)入口js文件，再把css分離出來即可耗溜。但是小程序的css和js是沒有引用關(guān)系的组力。因此采用了多入口的配置項(xiàng)。并把json和wxml文件拷貝到dist目錄中抖拴。

引入依賴

這里有2個(gè)插件需要說明一下燎字，ExtractTextPlugin用于分離css，CopyWebpackPlugin用來拷貝文件城舞。

'use strict';

const fs = require('fs');
const path = require('path');

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const ENTRY_DIR = path.resolve('./src');
const isBuild = process.env.WEBPACK_ENV === 'build';

處理入口文件

因?yàn)閖s不引用less轩触，所以需要單獨(dú)對(duì)less進(jìn)行處理。
同時(shí)還有wxml家夺、json等文件需要拷貝到dist目錄中脱柱。

// 處理入口文件
let entryObj = {};
let entryLessObj = {};
let copyArr = [];

let handleEntryObj = (dir) => {
    let files = fs.readdirSync(dir);
    
    files.forEach((fileName) => {
        let isFile = fs.statSync(path.join(dir, fileName)).isFile();
        let filePath = `${dir}/${fileName}`;
        if (!isFile) {
            // 目錄
            handleEntryObj(filePath);
        } else if (/\.js$/i.test(fileName)) {
            // 處理js
            entryObj[filePath.replace(`${ENTRY_DIR}/`, '')
                .replace(/\.js$/i, '')] = filePath;
        } else if (/\.less$/i.test(fileName)) {
            // 處理 less
            entryLessObj[filePath.replace(`${ENTRY_DIR}/`, '')
                .replace(/\.less$/i, '')] = filePath;
        } else {
            // 其他文件拷貝處理
            copyArr.push({
                from: filePath,
                to: `${path.resolve(__dirname, 'dist')}${filePath.replace(`${ENTRY_DIR}`, '')}`,
            });
        }
    });
};

handleEntryObj(ENTRY_DIR);

多入口配置

這里就是多入口配置，自己最開始一直用一個(gè)入口拉馋，打包出來的文件一直都有問題榨为。

// 配置項(xiàng) js & less
const config = [
    // js 配置
    {
        entry: entryObj,
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.json$/,
                    loader: 'json-loader',
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.js$/,
                    loader: 'eslint-loader',
                    exclude: /node_modules/,
                },
            ],
        },
    },
    // less 配置
    {
        entry: entryLessObj,
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].wxss',
        },
        module: {
            rules: [
                {
                    test: /\.less$/,
                    use: ExtractTextPlugin.extract({
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    minimize: !!isBuild,
                                }
                            },
                            "less-loader",
                        ]
                    })
                },
            ],
        },
        plugins: [
            new ExtractTextPlugin('[name].wxss'),
            new CopyWebpackPlugin(copyArr),
        ],
    },
];

module.exports = config;

執(zhí)行webpack，大功告成煌茴！