@lianjia-fe/bucky-mix NPM

bucky-mix

制作这个工具的主要目的是为了解决webpack在解决图片等静态资源的时候遇到的问题。如使用 file-loader 的时候，在生成的css文件中，background的文件名与实际图片的路径不符。导致的404错误。

bucky-mix 的主要想法是：

在使用file-loader来修改css文件的文件名，然后使用自制插件来复制图片等静态资源保持源码的目录结构与打包后的目录结构一致。

如:

static
|----src
|    |----index
|         |----index.js
|         |----index.css
|         |----imported_by_index_js.js
|
|----dist
|    |----index
|         |----index.js
|         |----index.css

使用方法

使用 cnpm 全局安装，或者在项目中使用 cnpm 安装。

npm install --registry=http://registry.npmjs.lianjia.com:7001/ @lianjia/bucky-mix

然后在src目录下配置 bucky-mix.js作为入口文件。

module.exports = (mix, args) => {
    // 执行 mix对象的js css copy方法
    mix
        .alias()
        .publicPath()
        .js(relativePathToJSFile)
        .css(relativePathTOCSSFile)
        .copy(relativePathToIMGFileOrDirectory)
        .dest(relativePathToDestinationDirectory)
}

`mix`对象方法解析

bucky-mix.js 文件 export 一个函数，该函数接收两个参数，第一个为mix本身的一个引用？，该对象提供了以下方法：

以下方法都接收一个相对路径的字符串作为参数

除了 dest 方法只能被调用一次之外，其余方法都可多次调用，甚至链式调用

`mix.js`方法

该方法用来编译js文件

该方法接受相对于当前路径（bucky-mix所在目录）的一个js文件的相对路径。如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js，而其中一个要打包的js文件在 /data0/www/htdocs/blog/static/src/pages/index/index.js，则应该给js方法传输的参数为./src/pages/index/index.js (即require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/index.js")) PS: 如果入口文件本身有 module.exports = {} 或者 exports.${moduleName} = xxx 或者 export moduleNmae = {} 就会在(必须是一个对象)，这样在打包完成之后 window对象将会挂载一个moduleName的内容

`mix.css`方法

该方法用来编译less, css, stylu文件

该方法接受相对于当前路径（bucky-mix所在目录）的一个css文件的相对路径。如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js，而其中一个要打包的css文件在 /data0/www/htdocs/blog/static/src/pages/index/index.less，则应该给js方法传输的参数为./src/pages/index/index.less (即require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/index.less"))

`mix.copy`方法

该方法用来指定哪些需要复制的文件或目录

该方法接受相对于当前路径（bucky-mix所在目录）的一个文件或路径的相对路径。如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js，而其中一个要打包的img文件在 /data0/www/htdocs/blog/static/src/pages/index/logo.png，则应该给js方法传输的参数为./src/pages/index/logo.png (即require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/logo.png"))

`mix.dest`方法

该方法用来指定所有的文件打包之后输出的目录。该方法可以缺省。假如没有提供该方法，默认路径在当前路径（bucky-mix.js所在目录）下的.mix目录中。

该方法接受相对于当前路径（bucky-mix所在目录）的一个文件或路径的相对路径。如bucky-mix.js文件在 /data0/www/htdocs/blog/static/bucky-mix.js，而要输出的目录在，/data0/www/htdocs/blog/static/dist/,则该参数为./dist。编译成功之后，/data0/www/htdocs/blog/static/src会对应生成到/data0/www/htdocs/blog/static/dist/。

`mix.watchIgnore`方法

该方法接受一个"只编译一次的文件"，如第三方依赖项。如react模块，则该模块在第一次被编译之后不会再被编译。这样可以缩短编译时间。

除了静态写由哪些文件需要处理，也可以使用动态去遍历文件生成入口：

const fs = require("fs")
const path = require("path")
module.exports = (mix, args) => {
    // 循环执行 mix 对象 的 js css copy 方法
    fs.readdirSync("srcPath").forEach( (v, i) => {
        mix
            .js("the JS file in the v path")
            .css("the CSS file in the v path")
            .copy("the file or dir want to copy in the v path")
    })
}

当前可能存在的bug：js css文件的path 前面的 ./会被path.join方法去掉。所以在必须的时候需要手动添加"./"

使用额外的模块（如`babel-polyfill`等）

npm install babel-plyfill 然后在输出的时候加上 mix.js("babel-polyfill")

bucky-mix

bucky-mix 的主要想法是：

使用方法

mix对象方法解析

mix.js方法

mix.css方法

mix.copy方法

mix.dest方法

mix.watchIgnore方法

使用额外的模块（如babel-polyfill等）