网站服务部小组文档

mac 下修改操作

强烈推荐使用 nvm 管理,以下操作基于 nvm 的基础上

操作步骤:

  • 首先切换到V6.11及以上 V6.X 版本(此处以6.14.2为例)

  • 设置为淘宝镜像

    npm config set registry https://registry.npm.taobao.org
    
  • 全局安装核心库

 npm install -g webpack webpack-cli webpack-dev-server //webpack核心、命令行工具、调试服务

下载git 模板(参见文档上)

  • 将 package.json拷贝到

    ~/.nvm/versions/node/v6.14.2/lib/
    
  • 切换命令行到当前目录,在命令行中输入:npm install进行插件/loader安装

  • 修改变量

    • 首先查看 shell 类型
    • 在终端输入 echo $SHELL

      如果输出的是:csh或者是tcsh,那么你用的就是C Shell。

      如果输出的是:bash,sh,zsh,那么你的用的可能就是Bourne Shell的一个变种。

      Mac OS X 10.2之前默认的是C Shell。Mac OS X 10.3之后默认的是Bourne Shell。

      如果你是默认的bourne shell 那么修改~/.bash_profile即可,如果你跟我一样使用的 zsh, 那么修改~/. zshrc 即可;

    • 打开你的.zshrc文件( vim ~/.zshrc),增加下面内容 (修改为你自己对应的文件夹)

      export NODE_PATH=/Users/tangzhao/.nvm/versions/node/v6.14.2/lib/node_modules
      
    • 然后 source ~/.zshrc 即可;

    • 如何判断是否添加成功,打开命令行,输入 node 进入 node 环境以后输入

      process.env.NODE_PATH  //输入此行内容
      '/Users/tangzhao/.nvm/versions/node/v6.14.2/lib/node_modules'   //此为输出结果,如为 undefined就说明不成功
      
  • 进入类似如下路径:(修改为你自己对应的文件夹) /Users/tangzhao/.nvm/versions/node/v6.14.2/lib/node_modules/webpack/node_modulesenhanced-resolve/lib/
  • 修改ModulesInHierachicDirectoriesPlugin.js文件,在第26行后面回车
    forEachBail(addrs, (addr, callback) => {   //这一句话前面,请注意是前面,千万别写到 foreach 里面去了!!!
    
    添加代码addrs.push(process.env.NODE_PATH);

修改以后类似如下

apply(resolver) {
        const target = resolver.ensureHook(this.target);
        resolver.getHook(this.source).tapAsync("ModulesInHierachicDirectoriesPlugin", (request, resolveContext, callback) => {
            const fs = resolver.fileSystem;
            const addrs = getPaths(request.path).paths.map(p => {
                return this.directories.map(d => resolver.join(p, d));
            }).reduce((array, p) => {
                array.push.apply(array, p);
                return array;
            }, []);
            addrs.push(process.env.NODE_PATH); //此为新增的内容
            forEachBail(addrs, (addr, callback) => {
                fs.stat(addr, (err, stat) => {
                    if(!err && stat && stat.isDirectory()) {
                        const obj = Object.assign({}, request, {
                            path: addr,
                            request: "./" + request.request
                        });
                        const message = "looking for modules in " + addr;
                        return resolver.doResolve(target, obj, message, resolveContext, callback);
                    }
                    if(resolveContext.log) resolveContext.log(addr + " doesn't exist or is not a directory");
                    if(resolveContext.missing) resolveContext.missing.add(addr);
                    return callback();
                });
            }, callback);
        });
    }
  • 重新打开命令行,即可全局使用webpack