feat: rollup实现md转为组件展示示例

Author: liuyu04

__test__/rollup-md2vue.test.js

@@ -0,0 +1,11 @@
+var rollup = require('rollup');
+var md = require('../src/index');
+
+it('returns a module for the markdown file', async () => {
+  const file = rollup.rollup({
+    input: 'samples/main.js',
+    plugins: [md()]
+  })
+  console.log('file: ', file)
+  // expect(file.filename).toEqual('test.md')
+})

demo.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    hello
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>

examples/button.md

@@ -4,15 +4,20 @@
   "description": "组件库展示，md文件转为vue文件，将其中demo分为组件渲染和代码展示两部分",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c rollup.config.js"
   },
   "devDependencies": {
+    "@gem-mine/rollup-chain": "^0.1.1",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-run": "^2.1.0",
     "@vue/compiler-dom": "^3.0.2",
     "highlight.js": "^10.4.1",
     "markdown-it": "^8.4.1",
     "markdown-it-chain": "^1.3.0",
     "markdown-it-container": "^2.0.0",
-    "markdown-it-anchor": "^5.0.2"
+    "rollup": "^2.57.0",
+    "rollup-plugin-vue": "^6.0.0"
   },
   "repository": {
     "type": "git",
@@ -27,5 +32,9 @@
   "bugs": {
     "url": "https://github.com/CodingCommunism/rollup-md2vue/issues"
   },
-  "homepage": "https://github.com/CodingCommunism/rollup-md2vue#readme"
+  "homepage": "https://github.com/CodingCommunism/rollup-md2vue#readme",
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.2.13",
+    "rollup-pluginutils": "^2.8.2"
+  }
 }

package.json

@@ -0,0 +1,15 @@
+// rollup.config.js
+// import run from '@rollup/plugin-run';
+const md2vue = require('./src/index');
+
+export default {
+  input: './examples/button.md',
+  output: {
+    file: 'dist/index.js',
+    format: 'cjs',
+    sourcemap: true
+  },
+  plugins: [
+    md2vue()
+  ]
+};

rollup.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const rollup = require('rollup');
+const md = require('./src/index');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const vuePlugin = require('rollup-plugin-vue')
+
+// async function bundleFileAndGetCode () {
+//   const bundle = await rollup.rollup({
+//     input: path.resolve(__dirname, "./examples/button.md"),
+//     plugins: [md()]
+//   })
+//   // console.log(bundle.cache.modules, 'bundless')
+//   return bundle
+// }
+async function bundleFileAndGetCode () {
+  const bundle = await rollup.rollup({
+    input: path.resolve(__dirname, "./demo.vue"),
+    plugins: [nodeResolve(), vuePlugin()]
+  })
+  // console.log(bundle.cache.modules, 'bundless')
+  return bundle
+}
+bundleFileAndGetCode()
+

run-plugin.js

@@ -1,12 +1,10 @@
 // const Config = require('markdown-it-chain') // TODO 将此webpack链式操作改为rollup支持的操作
-// const anchorPlugin = require('markdown-it-anchor')
-// const slugify = require('transliteration').slugify
+
 const hljs = require('highlight.js')
 
 const containers = require('./containers')
 const overWriteFenceRule = require('./fence')
 
-const config = new Config()
 
 // 配置markdown-it常规代码高亮，相关文档：https://markdown-it.github.io/markdown-it/#MarkdownIt.new
 const highlight = (str, lang) => {
@@ -16,31 +14,13 @@ const highlight = (str, lang) => {
   const html = hljs.highlight(lang, str, true, undefined).value
   return `<pre><code class="hljs language-${lang}">${html}</code></pre>`
 }
-
-// config.options
-//   .html(true)
-//   .highlight(highlight)
-//   .end()
-
-//   .plugin('containers')
-//   .use(containers)
-//   .end()
-
-// 这个插件生成的 href 没有带前缀，导致报错，
-// 例如：http://0.0.0.0:8086/#/npm-an-zhuang
-// http://0.0.0.0:8086/#/zh-CN/component/installation#npm-an-zhuang
-// .plugin('anchor')
-// .use(anchorPlugin, [
-//   {
-//     level: 2,
-//     slugify: slugify,
-//     permalink: true,
-//     permalinkBefore: true
-//   }
-// ])
-// .end()
-
-const md = config.toMd()
-overWriteFenceRule(md)
+const md = require('markdown-it')({
+  html: true,
+  highlight
+});
+
+const mdContainer = containers(md)
+overWriteFenceRule(mdContainer)
+// console.log(md, 'ssss')
 
 module.exports = md

src/config.js

@@ -1,4 +1,5 @@
 // 把md中的demo部分取出来 分成两份，一份代码高亮展示，一份渲染
+
 const mdContainer = require('markdown-it-container')
 
 module.exports = (md) => {
@@ -23,4 +24,5 @@ module.exports = (md) => {
 
   md.use(mdContainer, 'tip')
   md.use(mdContainer, 'warning')
+  return md
 }

src/container.js src/containers.js

@@ -0,0 +1,3 @@
+const md = require('../examples/button.md')
+
+console.log(md)

src/demo.js

@@ -1,6 +1,7 @@
 const { createFilter } = require('rollup-pluginutils');
 const { stripScript, stripTemplate, genInlineComponentText } = require('./util')
 const md = require('./config')
+const fs = require('fs')
 
 const ext = /\.md$/;
 
@@ -10,6 +11,7 @@ const ext = /\.md$/;
  * @returns {String} vue
  */
 function GenerateDisplayCode (source) {
+  console.log(source, 'source: ');
   const content = md.render(source)
 
   const startTag = '<!--element-demo:'
@@ -83,13 +85,14 @@ module.exports = function md2vue (options = {}) {
   return {
     name: 'md2vue',
     transform (code, id) {
+      // const code = fs.readFileSync(path, { encoding: 'utf-8' })
       if (!ext.test(id)) return null;
       if (!filter(id)) return null;
 
-
+      console.log(code, 'code')
       const data = GenerateDisplayCode(code);
       return {
-        code: `export default ${data};`,
+        code: `export default ${JSON.stringify(data.toString())};`,
         map: { mappings: '' }
       };
     }

src/index.js

@@ -1,6 +1,7 @@
 // const { compileTemplate } = require('@vue/component-compiler-utils');
-// const compiler = require('vue-template-compiler');
 const compiler = require('@vue/compiler-dom') // 模板
+// const compiler = require('@vue/compiler-sfc') // 模板
+
 
 function stripScript (content) {
   const result = content.match(/<(script)>([\s\S]+)<\/\1>/)