Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "ES6 syntax and webpack compression case analysis", the content is detailed, the steps are clear, the details are handled properly, I hope this "ES6 syntax and webpack compression case analysis" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

First of all, we introduce several important concepts that appear in this article:

Function computing (Function Compute): function computing is an event-driven service. Through function calculation, users do not need to manage the operation of the server, but only need to write code and upload. The function calculation prepares the computing resources and runs the user code in an elastic way, while the user only needs to pay according to the resources consumed by the actual code. Function to calculate more information.

Fun: Fun is a tool for supporting Serverless application deployment, which can help you easily manage resources such as function computing, API gateways, log services, and so on. It assists you in developing, building, and deploying operations through a resource configuration file (template.yml). More documentation references for Fun.

Version 2.0 of Fun has made a lot of efforts in deployment, and provides relatively complete features to facilitate and smooth deployment of cloud resources to the cloud. But in this version, the local development experience, there is still a lot of work to be done. So we decided to launch Fun Init to make up for this deficiency.

Fun Init: Fun Init exists as a subcommand of Fun, and can be used directly through the fun init command as long as the version of Fun is 2.7.0 or greater. The Fun Init tool can quickly create function computing applications according to the specified template, and quickly experience and develop function computing related business. Officials will provide commonly used templates, and users can also customize their own templates.

Background

When we write nodejs functions, functions tend to rely on many third-party dependencies, resulting in tens of megabytes of code from tens of megabytes to hundreds of megabytes. If the code package is too large, there will be the following problems:

It may make it impossible to upload the code to the function calculation service successfully, because the function calculation service has a limit on the size of the code package, which cannot exceed 50 MB after compression and 250 MB after decompression.

Will cause the cold start time to become larger, because the process of downloading the code becomes larger.

It takes longer to update the code each time.

In addition, function computation currently supports only two versions, nodejs8 and nodejs6, which do not support es6 syntax, but what if we are already used to writing es6 syntax?

Students who are familiar with nodejs should know that the project engineering management tool webpack, we can compile the es6 code into es5 through webpack, cut and package it into a js file, and then upload the js file to the function calculation to run.

Quick start

I provide a fun template here to help quickly build a function calculation nodejs project skeleton, support es6 code to be compiled into es5, cut and package into a js file, and then upload the js file to the function calculation to run. The operation steps are as follows:

1. Install nodecurl-o-https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bashnvm install 82. Install the fun tool npm install @ alicloud/fun-g

Some subcommands of the fun tool may use docker, so you need to install docker. For more information, please refer to the Fun installation tutorial.

3. Generate project skeleton fun init-n demo https://github.com/muxiangqiu/fc-skeleton-nodejs8.git from fun template

After the project is generated, there is a README.md file in the root directory. Reading this file can help you quickly understand what the project skeleton has done for you and related commands. Details: README.md.

4. Installation depends on cd demo # to switch to the project root, and all subsequent commands execute npm install under the project root

Note: the installation of a small number of special npm modules may depend on the current system environment, in order to correctly install the npm module in the system environment when the function is running, you can achieve it through the fun install command, such as puppeteer, specific reference: the correct posture for the calculation of the development function-install third-party dependency.

5. Compilation # production compilation npm run build# development compilation (this compilation method will not confuse the code, and generate source map information to facilitate development and debugging) npm run dev6. Run the function fun local invoke demo/demo7. Run debug function

Before running debugging, compile the source code with the npm run dev command, and then run the function in a debug manner:

Fun local invoke-d 3000 demo

The program will prompt you to enter the event of the function, if you do not need to enter, you can press ctrl+d to skip the input, and then, will not continue to execute, only after the connection of vs code, the program will continue to execute. How do you connect through vs code and start debugging? As shown in the following figure:

8. Deploy functions to the cloud

You need to use the following information such as AK when deploying the function, which can be configured through fun config. If it has been configured, please ignore it. The deployment function command is as follows:

Fun deploy read here, this "ES6 grammar and webpack compression example analysis" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

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.