weex預設webpack.config.js改造

虛光發表於2018-01-08
WebJS

解決的問題：

由於weex預設的webpack配置，會導致在src資料夾下的每一個.vue在temp資料夾下生成對應的一個.js檔案，該js檔案有一段這樣的程式碼

    contents += 'var App = require(\'' + relativePath + '\')\n';
    contents += 'App.el = \'#root\'\n';
    contents += 'new Vue(App)\n';
複製程式碼

會導致多個vue物件掛載同一個id（#root），導致整個頁面就只有一個vue物件，無法像寫spa專案一樣寫weex專案，因此在這裡對webpack.cofig進行改造（新增一個entry.js入口js檔案，和一個最外層的App.vue承載路由渲染）

預設的webpack.config.js檔案中，有兩個方法

第一個 getEntryFileContent

const getEntryFileContent = (entryPath, vueFilePath) => {
    let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
    let contents = '';
    /**
     * The plugin's logic currently only supports the .we version
     * which will be supported later in .vue
     */
    if (hasPluginInstalled) {
      const plugindir = pathTo.resolve('./web/plugin.js');
      contents = 'require(\'' + plugindir + '\') \n';
    }
    if (isWin) {
      relativePath = relativePath.replace(/\\/g, '\\\\');
    }
    contents += 'var App = require(\'' + relativePath + '\')\n';
    contents += 'App.el = \'#root\'\n';
    contents += 'new Vue(App)\n';
    return contents;
  }
複製程式碼

第二個 walk

const walk = (dir) => {
    dir = dir || '.';
    const directory = pathTo.join(__dirname, 'src', dir);
    fs.readdirSync(directory).forEach((file) => {
      const fullpath = pathTo.join(directory, file);
      const stat = fs.statSync(fullpath);
      const extname = pathTo.extname(fullpath);
      if (stat.isFile() && extname === '.vue' || extname === '.we') {
        if (!fileType) {
          fileType = extname;
        }
        if (fileType && extname !== fileType) {
          console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
        }
        const name = pathTo.join(dir, pathTo.basename(file, extname));
        if (extname === '.vue') {
          const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
          fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
          entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
        }
        weexEntry[name] = fullpath + '?entry=true';
      } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
        const subdir = pathTo.join(dir, file);
        walk(subdir);
      }
    });
  }
複製程式碼

這兩個方法，是遍歷src中的.vue檔案，然後在temp資料夾中生成一個相對應的JS檔案

如果我們採用傳統的vue開發，需要一個入口.js檔案，我們需要對這個配置進行改造

  1. 新增入口檔案配置
const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};
複製程式碼
  1. 刪除或者更改配置（當然，第三種方法還可以把.vue元件不寫在src內）

    刪除

    1. 刪除getEntryFileContent函式

    2. 刪除walk函式

    3. 刪除walk() walk函式的呼叫

    修改（程式碼來自github上高仿網易嚴選專案）

    注意看最外層的if判斷，新增了額外條件 如果是檔案且字尾是.vue且不是App.vue的，則進入判斷。否則，判斷是不是page資料夾，如果不是，則結束。
function walk(dir) {
  dir = dir || '.';
  const directory = pathTo.join(__dirname, 'src', dir);
  fs.readdirSync(directory)
    .forEach((file) => {
      const fullpath = pathTo.join(directory, file);
      const stat = fs.statSync(fullpath);
      const extname = pathTo.extname(fullpath);
      const basename = pathTo.basename(fullpath);
      console.log("配置",file,fullpath,stat,extname,basename,)
      if (stat.isFile() && extname === '.vue' && basename != 'App.vue' ) {
        if (!fileType) {
          fileType = extname;
        }
        if (fileType && extname !== fileType) {
          console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
        }
        const name = pathTo.join(dir, pathTo.basename(file, extname));
        if (extname === '.vue') {
          const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
          fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
          entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
        }
          weexEntry[name] = fullpath + '?entry=true';
      } else if (stat.isDirectory() && ['build','include','assets','filters','mixins'].indexOf(file) == -1 ) {
        const subdir = pathTo.join(dir, file);
        walk(subdir);
      }
    });
}
複製程式碼

相關文章