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

一、三個步驟

根目錄有package.json

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

重點強調(diào)就是生產(chǎn)環(huán)境的包要放在dependencies中?。。?/p>

根目錄有node_moudles

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

重點就是你必須提前npm install，這樣才能給小程序用。

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

image

官方文檔

二、開發(fā)NPM包

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

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

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

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

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

自定義組件

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

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

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

引入依賴

這里有2個插件需要說明一下，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';

處理入口文件

因為js不引用less，所以需要單獨對less進行處理。
同時還有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);

多入口配置

這里就是多入口配置，自己最開始一直用一個入口，打包出來的文件一直都有問題。

// 配置項 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，大功告成！

image

記錄一下，自己第一次配webpack的經(jīng)驗，踩過的坑其實都是因為經(jīng)驗不足，以前了解的太少了，總是寫個hello word的demo就完事了。學習還是不能淺嘗擱置?。?！

有問題和疑問可留言指出，文章寫得有點粗糙。