Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how WeChat Mini Programs supports npm". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Npm support

Starting with Mini Program Base Library version 2.2.1 or above, and developer tools 1.02.1808300 or above, Mini Program supports installing third-party packages using npm.

Step on the road of the pit

Because some date data needs to be formatted in the project, moment, a JavaScript date processing class library, is selected.

First use the command line to install moment

# Open the root directory cd srcnpm install-production moment of Mini Program

Then follow the Mini Program document until the build is complete.

So we can't wait to start using moment.

Import moment from 'moment';let sFromNowText = moment (new Date ()-360000) .fromNow (); console.log (sFromNowText); / / console output: "6 minutes ago"

Moment worked well, but we soon found out that English was not what we wanted.

So we found the internationalization configuration of moment and set the global language to Chinese

Import moment from 'moment';moment.locale (' zh-cn'); let sFromNowText = moment (new Date ()-360000). FromNow (); console.log (sFromNowText); / / but the console still outputs: "6 minutes ago"

Attempt to output the return value after moment.locale execution

/ /... let sLang = moment.locale ('zh-cn'); console.log (sLang); / / console output: "en"

It was found that setting the locale failed. After checking and flipping through Mini Program documents, it was found that after building npm through Wechat developer tools, the files related to the locale would not be copied to the miniprogram_npm directory, but only the imported js file and its dependent modules would be packaged, which led to the failure of loading the Chinese locale. The following is a passage from the Mini Program document:

There are two kinds of build packaging: Mini Program npm package will directly copy all files under the build file generation directory to miniprogram_npm; other npm packages will go through the dependency analysis and packaging process (similar to webpack) starting from the import js file.

After a quick look at the moment source code, I found that the moment.locale method would load the locale package from the. / locale/ directory, so I tried to manually copy the Chinese locale package from the node_modules/moment/ directory to the miniprogram_npm directory.

/ / moment.js//... function loadLocale (name) {/ /. Var aliasedRequire = require; aliasedRequire ('. / locale/' + name); / /...} / /.

After debugging, it was found that moment made an error in defining the locale, which was due to the fact that the build of npm caused the entry file (moment.js) to be renamed to index.js after packaging: Error: module "miniprogram_npm/moment/moment" is not defined

/ / zh-cn.js (function (global, factory) {typeof exports = = 'object' & & typeof module! =' undefined' & & typeof require = 'function'? Factory (require ('.. / moment')): typeof define = = 'function' & & define.amd? Define (['.. / moment'], factory): factory (global.moment);}) (this, function (moment) {'use strict'; var zhCn = moment.defineLocale (' zh-cn', {/ /...}); return zhCn;})

Sure enough, manually change the'.. / moment''to'.. / index', and then execute it again.

Import moment from 'moment';moment.locale (' zh-cn'); let sFromNowText = moment (new Date ()-360000). FromNow (); console.log (sFromNowText); / / console now, output: "6 minutes ago"

It's done, nice! But don't forget to look back and summarize the causes of these problems:

Building npm will change the entry file (eg: moment.js) of the npm package to index.js after packaging.

Building npm only packages the entry js file of the npm package and its dependent modules, and does not copy some optional files under the npm package (eg: moment locale package) to the miniprogram_npm directory

For information about miniprogram_npm, building npm and more npm support, please refer to the Mini Program documentation-npm support

This is the end of "how WeChat Mini Programs supports npm". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.