search

QingWei-Li / vue-markdown-loader

📇 Convert Markdown file to Vue2.0 component.
704 stars 161 forks source link

not work under cli-3 in Prod #54

Closed chiaweilee closed 5 years ago

chiaweilee commented 5 years ago

"@vue/cli-service": "^3.0.5" "vue-loader": "^15.4.2" "webpack": "^4.15.1"

webpackConfig.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        preventExtract: false,
        preprocess: function (markdownIt, source) { return source },
        raw: true
      })

Above works in Dev, but not in Prod..

It report:

 ERROR  Failed to compile with 7 errors                                                                                                                                            13:37:38

Module build failed (from ./node_modules/_thread-loader@1.2.0@thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Cannot read property '__vueMarkdownOptions__' of undefined

    at Object.module.exports (/Users/jv/Desktop/project/vue-markdown-docs/node_modules/_vue-markdown-loader@2.4.1@vue-markdown-loader/lib/markdown-compiler.js:67:46)

then, I refactor vue-markdown-loader/index.js

module.exports = process.env.NODE_ENV === 'production' ?
  require('./lib/core') :
  require('./lib/markdown-compiler');

and modified loader config

.use('vue-markdown-loader')
      .loader('vue-markdown-loader')

now, No error reported in both Dev and Prod.. but, the chunk is empty..

dist/js/chunk-vendors.32edb056.js         129.44 kb        45.94 kb
  dist/js/app.119f3299.js                   11.98 kb         4.05 kb
  dist/precache-manifest.27ad7d8a0fb5742    1.95 kb          0.68 kb
  86a504fee5ec81207.js
  dist/js/chunk-2d22998c.cf913dd2.js        1.82 kb          0.88 kb
  dist/js/chunk-510ddfb8.260f7556.js        1.56 kb          0.76 kb
  dist/js/chunk-0c65d7d4.3e2bd1f5.js        1.45 kb          0.71 kb
  dist/js/chunk-2d20f179.4c9f3766.js        1.24 kb          0.66 kb
  dist/service-worker.js                    0.95 kb          0.54 kb
  dist/js/chunk-2d0d4006.2fec80ca.js        0.29 kb          0.24 kb
  dist/js/chunk-2d228c15.6642dcd8.js        0.29 kb          0.24 kb
  dist/js/chunk-2d22c353.6253a60a.js        0.29 kb          0.24 kb
  dist/js/chunk-2d20900a.907f3073.js        0.29 kb          0.24 kb
  dist/js/chunk-2d0b37b3.a2ed9b24.js        0.29 kb          0.24 kb
  dist/js/chunk-2d21b537.a0d0e569.js        0.29 kb          0.24 kb
  dist/js/chunk-2d0d7d7a.8d88fe70.js        0.28 kb          0.24 kb
  dist/js/chunk-2d22269e.69ef33d0.js        0.19 kb          0.17 kb
  dist/js/chunk-76d2465d.dbf8a03d.js        0.15 kb          0.14 kb
  dist/css/chunk-76d2465d.9771d7a6.css      23.13 kb         5.14 kb

then, I try to rafctor lib/core.js

...
var compiler = require('./markdown-compiler')
module.exports = function(source) {
  this.cacheable();
...
console.log(compiler.call(this, source)) // output: Vue Component
...
}

last, I don't know how to load Vue Component with vue-loader.

So, I fail.

chiaweilee commented 5 years ago 
var loaderUtils = require('loader-utils');
var compiler = require('./markdown-compiler');

module.exports = function(source) {
  this.cacheable();

  var options = loaderUtils.getOptions(this) || {};
  Object.defineProperty(this._compilation, '__vueMarkdownOptions__', {
    value: options,
    enumerable: false,
    configurable: true
  })

  return compiler.call(this, source);
};
showonne commented 5 years ago

@chiaweilee How to solve this problem？

rockyxia commented 5 years ago

@chiaweilee How to solve this problem？

好了吗？

chiaweilee commented 5 years ago

@chiaweilee How to solve this problem？

好了吗？

Unfortunately not..

I forked and rewrite it myself @chiaweilee/vue-markdown-loader

rockyxia commented 5 years ago

@chiaweilee How to solve this problem？

好了吗？

Unfortunately not..

I forked and rewrite it myself @chiaweilee/vue-markdown-loader

How can I use it too?

ohhoney1 commented 5 years ago

@chiaweilee How to solve this problem？

好了吗？

Unfortunately not.. I forked and rewrite it myself @chiaweilee/vue-markdown-loader

How can I use it too?

有两个思路：一个是fork份vue-markdown-loader，自己修改源码； 也可以把vue-loader依赖降至15版本以下，如@14.2.2

chiaweilee commented 5 years ago

check my updated repo @chiaweilee/vue-markdown-loader

Install

npm install @chiaweilee/vue-markdown-loader

Usage

Vue-cli 3.x

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@chiaweilee/vue-markdown-loader')
      .loader('@chiaweilee/vue-markdown-loader')
      .options({
        // options
      })
  }
}

Demo at @chiaweilee/vue-markdown-docs

rockyxia commented 5 years ago

check my updated repo @chiaweilee/vue-markdown-loader

Install

npm install @chiaweilee/vue-markdown-loader

Usage

Vue-cli 3.x

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@chiaweilee/vue-markdown-loader')
      .loader('@chiaweilee/vue-markdown-loader')
      .options({
        // options
      })
  }
}

Demo at @chiaweilee/vue-markdown-docs

thanks

sunshineshenjin commented 5 years ago

@ohhoney1 : Vue cli3 将vue-loader 版本降到@14.2.2 dev和production都可以用，感谢!

Miaoxingren commented 5 years ago

I found options missing when .md file contains vue template, so I forked the repo and made some changes.

In markdown-compiler.js:

module.exports = function(source) {
  ....

  var params = loaderUtils.getOptions(this) || {};
  var opts = {}

  if (params.vuemdrcPath) {
    opts = require(params.vuemdrcPath)
  } else {
    var vueMarkdownOptions = this._compilation.__vueMarkdownOptions__;
    opts = vueMarkdownOptions ? Object.create(vueMarkdownOptions.__proto__) : {}; // inherit prototype
    opts = Object.assign(opts, params, vueMarkdownOptions); // assign attributes
  }

  var preventExtract = false;

  if (opts.preventExtract) {
    delete opts.preventExtract;
    preventExtract = true;
  }

  ....
};

In project root, create .vuemdrc.js:

var mdItAnchor = require('markdown-it-anchor')
var slugify = require('transliteration').slugify

module.exports = {
  raw: true,
  use: [
    [mdItAnchor, {
      level: 2,
      slugify: slugify,
      permalink: true,
      permalinkBefore: true
    }]
  ]
}

In vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        vuemdrcPath: path.resolve(__dirname, '.vuemdrc.js')
      })
  }
}

It seems works with vue cli3 and vue loader 15.

yolinsoft commented 5 years ago

Set parallel: false in vue.config.js