weex项目将多个vue文件编译成多个js文件

567 阅读1分钟

1、针对新建项目默认配置作出修改

针对 webpack.common.conf.js 作出修改

const webEntry = {};
const weexEntry = {};
const getEntryFileContent = (entryPath, vueFilePath) => {
  let relativeVuePath = path.relative(path.join(entryPath, '../'), vueFilePath);  //找出从第一个路径到第二个路径的相对路径
  let relativeEntryPath = helper.root(config.entryFilePath);
  let relativePluginPath = helper.rootNode(config.pluginFilePath);

  let contents = '';
  let entryContents = fs.readFileSync(relativeEntryPath).toString();
  if (isWin) {
    relativeVuePath = relativeVuePath.replace(/\\/g, '\\\\');
    relativePluginPath = relativePluginPath.replace(/\\/g, '\\\\');
  }
  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 += `\nconst App = require('${relativeVuePath}');\n`;
  contents += `new Vue(Vue.util.extend({el: '#root'}, App));\n`;
  return entryContents + contents;
}
const getEntryFile = (dir) => {
  dir = dir || '.';
  const directory = helper.root(dir);  //拿到src的路径
  fs.readdirSync(directory).forEach((file) => {  //遍历src下所有文件的名称
    const fullpath = path.join(directory, file);  //拼接  文件的完全路径
    const stat = fs.statSync(fullpath);
    const extname = path.extname(fullpath);  //返回文件路径的拓展名
    if (stat.isFile() && extname === '.vue') {  //判断是否为.vue文件
      const name = path.join(dir, path.basename(file, extname));  //basename() 提取出用 ‘/' 隔开的path的最后一部分 如:index
      if (extname === '.vue') {
        const entryFile = path.join(vueWebTemp, dir, path.basename(file, extname) + '.js'); // index.js
        fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath));
        webEntry[name] = entryFile;
      }
      weexEntry[name] = fullpath + '?entry=true';
    }
    else if (stat.isDirectory() && file !== 'build' && file !== 'include') {  //判断是否为文件夹路径且不是build,include文件夹
      const subdir = path.join(dir, file); //路径拼接
      getEntryFile(subdir); //接着遍历下一层文件夹里的所有文件内容
    }
  });
}

getEntryFile();

2、针对entry.js进行修改

import Vue from 'vue';
import weex from 'weex-vue-render';

weex.init(Vue);

3、执行 npm run build 就会将src里的.vue文件以及子文件夹中的.vue文件都编译成 .js文件