Dachang Technology Advanced Front-end Node Advanced
Click on the top programmer's growth guide, pay attention to the public number
Reply 1, join the advanced Node exchange group
Author: Mouse Jun QAQ
Original text: https://juejin.cn/post/7064864648729722887
Hello everyone! ! , Long time no see, are you happy for the New Year? The author here first wishes everyone a happy new year, and I wish everyone a happy old age QAQ. After this year, I found that the latest version of Vue's official documentation [1] was officially launched. Have you all been there to watch? In addition to the new interface and dark theme, the biggest highlight is this Vue Playground [2] , which provides an online interactive editing environment to directly debug the case code provided by the document online, and it is very lightweight.
What is REPL (Interactive Interpreter)
REPL (Read Eval Print Loop: Interactive Interpreter) represents an environment in which we can enter commands or code and receive responses from the interpreter. There are four main characteristics.
Read - Read user input, parse the input data structure and store in memory.
Execute Eval - Execute the input data structure
Print Print - output the result
Loop Loop - Loop through the above steps until the user exits.
That is to say, all the code editors we use now are actually a REPL (interactive interpreter)
What is an online REPL (Interactive Interpreter)
Most of the code editors we use on a daily basis are downloaded and installed locally through software packages, because a better and smoother interaction and compilation experience can be obtained in the local system environment. However, in some scenarios, the interactive interpreter of the web version is more advantageous, such as
I have a piece of code that I want to share with others. It is obviously more convenient to pass the URL of the web page than to transmit the code package.
I wrote a component that needs to have a preview address or an iframe preview link embedded in my document
I want to reproduce a bug in the simplest environment, but I feel that it is too troublesome to re-open a project. I want to have a web page, and I can write code directly when I open it. It is best that my commonly used dependencies are built into it.
You can download the code edited online and run it locally
Coincidentally, the Vue Playground of the above scenarios is better solved
existing problems
Although Vue's Playground has all the features of an online interactive interpreter, it only presets the running environment of Vue. Suppose I want to preset more modules. For example, I want it to naturally support lodash, component library, and various A tool function, what should I do?
The author himself is an open source component library, and the homework has been written. Students who are interested in copying the homework and not interested in seeing the implementation can read it directly. In theory, you can also easily copy an online editor of your own. device
Varlet UI Playground[3]
Source [4]
how
The first open Vue Playgroundsource code can be found that the core of the entire interactive interpreter is in @vue/replthis dependency, and Vue Playgroundit is only @vue/replintegrated.
We can see that @vue/replthe life cycle of Youda has been abstracted into one classand included in it @vue/repl. Let's look at its specific implementation. We only need to implement this as described in the gourd and draw a scoop class, and add our preset code. That's it, if you are interested, you can take a look at the before and after modifications provided below and compare them.
Vue Playground source code [5]
The class provided by \@vue/repl before modification [6]
Modified class [7]
inject dependency list
As shown in the figure below, it @vue/replis classonly preset vue. If you need to preset more third-party modules, you can inject them here (merge objects). It is important to note that because the entire interpreter is based on Vite, the dependent third-party module must be a esmmodule.
The author's version injection list looks like this. keyIt is a module alias, it valueis a module cdn地址, because the author directly put the dependencies in the publicdirectory and packaged them together, so a relative path is used.
{
'@varlet/ui': './varlet.esm.js',
'@varlet/touch-emulator': './varlet-touch-emulator.js'
}
复制代码Inject preset file
After determining the dependencies, you can add preset files and codes. The preset files are stored in state.files, and we can push the files we need to append.
The author added this
Then...
Then you can normally access the preset files in the interpreter. The article is just to facilitate everyone to understand the key points. It is recommended that you read the source code. The source code is very short. It took the author more than an hour to copy the official Vue case and go online. But the benefits are really huge.
The author also recommends building such an online editing platform within the enterprise, integrating some commonly used modules to do some bug feedback, share code, and write some drafts.
finally
The author's team is actively maintaining our open source project Varlet. It is a Vue3 development-based Material-style mobile component library, Varlet UI Playgroundwhich is also officially launched. You are welcome to use it to give us bug feedback, or to play with our component library. A quick way ( after all, many people are too lazy to install dependencies ), and also thank the community for their support and help. We will make persistent efforts in the new year.
If you support us or think we are doing well, there is our warehouse address below, please help us with a small order star. The support of our classmates is the whole driving force for our open source.
Github warehouse address [8] document address [9]
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：
1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长
点赞和在看就是最大的支持❤️