原汁原味的配方:「微信小程式支援 NPM」

JerryC發表於2019-03-03
微信小程式NPM

歡迎來我的部落格閱讀：「原汁原味的配方:「微信小程式支援 NPM」」

微信小程式本身不支援 npm 包的使用，目前市面上很多框架也有了相對應的解決方案。

本文旨在為那些不願意引入第三方框架， 想在小程式環境中寫原汁原味程式碼的人（例如我），提供一種解決問題的思路。

在現代的 Web 開發中，我們對 Webpack 已經再熟悉不過了，簡單理解，它就是專案釋出之前，把所有資源都打包好，然後提供一個入口檔案，在入口模板中引入這個入口檔案。

那麼我的思路，就是利用 Webpack 把我們所有的 npm 依賴打包好，提供一個入口檔案，在小程式開發中，我們通過這個入口檔案，進而使用 npm 的依賴。

原汁原味的配方:「微信小程式支援 NPM」

我們最終實現的效果應該是這樣的。

例如我們小程式的首頁中，需要使用到 moment

pages/home/home.js：

const { moment } require(`../npm/index`);
const time = moment();
複製程式碼

Webpack 打包 npm 依賴

webpack 預設輸出的 bundle.js ，是一個立即執行的閉包，如以下：

使用 webpack.config.js 配置：

const path = require(`path`);

module.exports = {
  entry: `./foo.js`,
  output: {
    path: path.resolve(__dirname, `dist`),
    filename: `bundle.js`
  }
};
複製程式碼

執行 $ webpack 生成的 bundle.js :

(function(modules) { 

  // webpackBootstrap

})([module1, module2, module3]);
複製程式碼

示例程式碼：https://github.com/JerryC8080/use-npm-in-weapp/tree/master/step1

這樣的程式碼，顯然沒法達到我們要的效果。
幸好 webpack 提供了 output.libraryTarget 的配置項。

output.libraryTarget: “commonjs2”

對於 output.libraryTarget: "commonjs2" 官方解釋：

The return value of your entry point will be assigned to the module.exports.

通過配置該屬性，我們能保證 webpack 打包出來的 bundle.js，是模組化的。
當然 output.libraryTarget 還有其他的選項值，可以查閱官方文件。

例如，使用 webpack.config.js 配置:

const path = require(`path`);

module.exports = {
  entry: `./foo.js`,
  output: {
    path: path.resolve(__dirname, `dist`),
    filename: `bundle.js`,
    libraryTarget: `commonjs2`,
  }
};
複製程式碼

執行 $ webpack 生成的 bundle.js :

module.exports = (function(modules) { 

  // webpackBootstrap

})([module1, module2, module3]);
複製程式碼

示例程式碼：https://github.com/JerryC8080/use-npm-in-weapp/tree/master/step2

這樣，我們就可以通過 require(`bundle.js`), 來使用 npm 依賴了。
在這個基礎上，我們就可以打造一個使用 npm 依賴的入口。

打造 npm 入口

建立入口檔案：npm.js

const momennt = require(`moment`);

module.exports = {
    momennt,
};
複製程式碼

配置檔案：webpack.config.js

const path = require(`path`);

module.exports = {
    entry: `./entry.js`,
    output: {
        path: path.resolve(__dirname, `npm`),
        filename: `index.js`
    },
};
複製程式碼

執行 $ webpack，輸出 ./npm/index.js 打包檔案，對應的目錄：

.
├── entry.js
├── npm
│   └── index.js
└── webpack.config.js
複製程式碼

示例程式碼：https://github.com/JerryC8080/use-npm-in-weapp/tree/master/step3

笨拙點的方法，你只需要把 npm/index.js 拷貝到你的專案中，就可以使用你所引入的 npm 包的內容了。

如果你的專案中使用了構建工具的話，就可以把「 webpack 打包 npm」 的這項任務加入到你的構建流程中。

我是使用 gulp 來做專案構建工作的，下面提供一種基於 gulp 的實現作為參考。

結合 Gulp 做專案工程化

工程目錄：

.
├── dist
│   ├── npm
│   │   └── index.js
│   └── pages
│       └── home
│           └── home.js
├── gulpfile.js
└── src
    ├── npm
    │   └── index.js
    └── pages
        └── home
            └── home.js
複製程式碼

而 gulpfile 負責兩件事：

  1. 把 src 的 js 檔案通過 babel 編譯到 dist 目錄（示例中忽略其他 wxml、wxss 檔案）
  2. 把 npm/index.js 通過 webpack 打包到 dist/npm/index.js，並壓縮。

gulpfile.js:

const gulp = require(`gulp`);
const babel = require(`gulp-babel`);
const del = require(`del`);
const runSequence = require(`run-sequence`);
const webpack = require(`webpack`);
const webpackStream = require(`webpack-stream`);

const webpackConfig = {
    module: {
        loaders: [{
            test: /.js$/,
            loader: `babel-loader`,
            exclude: /node_modules/,
            options: {
                presets: [`es2015`],
            },
        }],
    },
    output: {
        filename: `index.js`,
        libraryTarget: `commonjs2`,        
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
    ],
};

// 清空 ./dist 目錄
gulp.task(`clean`, () => del([`./dist/**`]));

// 打包 npm 依賴
gulp.task(`npm`, () => {
    gulp.src(`./src/npm/*.js`)
        .pipe(webpackStream(webpackConfig), webpack)
        .pipe(gulp.dest(`./dist/npm`));
});

// 編譯 JS 檔案
gulp.task(`scripts`, () => {
    gulp.src([`./src/**/*.js`, `!./src/npm/*.js`])
        .pipe(babel({
            presets: [`stage-0`, `es2015`],
        }))
        .pipe(gulp.dest(`./dist`));
});

// 開發模式命令
gulp.task(`build`, [`clean`], () => runSequence(`scripts`, `npm`));
複製程式碼

示例程式碼：https://github.com/JerryC8080/use-npm-in-weapp/tree/master/step4

關於控制 npm 檔案程式碼量

微信限制了專案的程式碼量為 2M，就算使用了分包機制，最多也是 4M 的程式碼量。
區區一個 moment 庫的話，就算壓縮過，也需要兩百多 KB，這對於我們的程式碼量，是很不友好的。
我們需要對 npm 的引入持非常謹慎的態度，去度量每個依賴包的大小，想盡各種辦法減少依賴的程式碼量。
譬如moment 我們可以使用 moment-mini 來代替，後者壓縮過後只需要 51KB。

而且我認為把 npm 的依賴放在一個入口檔案中，會讓我們可以對 npm 的依賴有一個全域性的把握。

相關文章