Weex-toolkit build without VueRouter

Without VueRouter, the compile configurations for web and weex become much more complex. The common configuration for different environments is in the webpack.common.conf.js.

const getEntryFile = (dir) => {
  dir = dir || config.sourceDir;//src
  // The config.entryFilter is `**/*.vue`
  const enrtys = glob.sync(`${dir}/${config.entryFilter}`, config.entryFilterOptions);
  // generate entry file 
  enrtys.forEach(entry => {// entry is relative path of vue file
    const extname = path.extname(entry);
    const basename = entry.replace(`${dir}/`, '').replace(extname, '');
    // generate temp file to .temp dir
    const templatePathForWeb = path.join(vueWebTemp, basename + '.web.js');
    const templatePathForNative = path.join(vueWebTemp, basename + '.js');
    // generate vueFile.web.js for every Vue File
    fs.outputFileSync(templatePathForWeb, getWebEntryFileContent(templatePathForWeb, entry));
    fs.outputFileSync(templatePathForNative, getNativeEntryFileContent(templatePathForNative, entry));
    webEntry[basename] = templatePathForWeb;
    weexEntry[basename] = templatePathForNative;
  })
}

getEntryFile finds out all the vue files in src directory and generates js file for every vue file.

As a result, the function collects the paths of entry file and creates 2 entry arrays for Web and Weex respectively.

Based on entry.js, getWebEntryFileContent function generates entry file for every File:

//entryPath: .temp/vueFile.web.js
// vueFilePath: src/vueFile.vue
const getWebEntryFileContent = (entryPath, vueFilePath) => {
// relative path of Vue File
  let relativeVuePath = path.relative(path.join(entryPath, '../'), vueFilePath);
  //  abs path of entry.js
  let relativeEntryPath = helper.root(config.entryFilePath);
  //  abs path of plugin.js   
  let relativePluginPath = helper.rootNode(config.pluginFilePath);

  let contents = '';
  // read the entry.js
  let entryContents = fs.readFileSync(relativeEntryPath).toString();
  if (isWin) {
    relativeVuePath = relativeVuePath.replace(/\\/g, '\\\\');
    relativePluginPath = relativePluginPath.replace(/\\/g, '\\\\');
  }
  // add plugin info to entry file
  if (hasPluginInstalled) {
    contents += `\n// If detact plugins/plugin.js is exist, import and the plugin.js\n`;
    contents += `import plugins from '${relativePluginPath}';\n`;
    contents += `plugins.forEach(function (plugin) {\n\tweex.install(plugin)\n});\n\n`;
    entryContents = entryContents.replace(/weex\.init/, match => `${contents}${match}`);
    contents = ''
  }
  contents += `
const App = require('${relativeVuePath}');
new Vue(Vue.util.extend({el: '#root'}, App));
`;
// entry File content concats content
  return entryContents + contents;
}

getNativeEntryFileContent function generates entry file for every Vue File:

//entryPath: .temp/vueFile.js
// vueFilePath: src/vueFile.vue
const getNativeEntryFileContent = (entryPath, vueFilePath) => {
  let relativeVuePath = path.relative(path.join(entryPath, '../'), vueFilePath);
  let contents = '';
  if (isWin) {
    relativeVuePath = relativeVuePath.replace(/\\/g, '\\\\');
  }
  contents += `import App from '${relativeVuePath}'
App.el = '#root'
new Vue(App)
`;

  return contents;
}

Respectively, the paths of entry file for weex and web are collected into two arrays: webEntry[basename] and weexEntry[basename].

According to the entry files, the compiled outputs for every Vue File is placed in ./dist .

Release Config

The webpack.prod.conf.js file only adds a "uglify" plugin for weex building in production env.

The different things are the web release configurations in webpack.release.conf.js file.

By HtmlWebpackPlugin, webpack generates corresponding HTML File and and Javascript File for every Vue File.

# Weex-toolkit build without VueRouter

# Release Config

Weex-toolkit build without VueRouter

Release Config