@lianjia-fe/bucky-mix
bucky 前端构建工具
Last updated 2 years ago by schacker .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @lianjia-fe/bucky-mix 
SYNC missed versions from official npm registry.

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")

Current Tags

  • 1.1.7                                ...           latest (2 years ago)

1 Versions

  • 1.1.7                                ...           2 years ago
Downloads
Today 0
This Week 1
This Month 2
Last Day 1
Last Week 0
Last Month 1
Dependencies (23)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |