ant-tool / atool-build Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ibigbug/antd-build

391.0 28.0 75.0 310 KB

:hammer: Build tool based on webpack.

Makefile 0.07% JavaScript 99.05% CSS 0.52% HTML 0.37%

webpack build-tool

atool-build's Introduction

atool-build

基于 webpack 的构建封装.

特性

基于 webpack 实现
支持通过 webpack.config.js 进行扩展 webpack 的配置项
支持 stage-0, es2015, react 和 less
支持 hash 模式的构建, 并生成映射表 map.json
支持 typescript

安装

$ npm i atool-build --save

使用

$ atool-build [options]

命令行参数

$ atool-build -h

  Usage: atool-build [options]

  Options:

    -h, --help                output usage information
    -v, --version             output the version number
    -o, --output-path <path>  output path
    -w, --watch [delay]       watch file changes and rebuild
    --hash                    build with hash and output map.json
    --publicPath <publicPath> webpack publicPath
    --devtool <devtool>       sourcemap generate method, default is null
    --config <path>           custom config path, default is webpack.config.js
    --no-compress             build without compress
    --silent                  build without notify

配置扩展

如果需要对内置的 webpack 配置进行修改, 可在项目根目录新建 webpack.config.js 进行扩展.

让 webpack.config.js 输出 Function, 比如:

var path = require("path");
module.exports = function(webpackConfig) {
  webpackConfig.output.path = path.join(__dirname, './public');
  return webpackConfig;
};

参数:

webpackConfig -- 默认配置, 修改后返回新的配置

详细内容：atool-build 基本使用

FAQ

如何在 webpack.config.js 中引用 webpack ? (新增插件需要)

var webpack = require('atool-build/lib/webpack');

#32

为什么 TypeScript 错误不会显示？

自行添加 fork-ts-checker-webpack-plugin

atool-build's People

Contributors

Stargazers

Watchers

atool-build's Issues

babel-plugin-react-transform

https://github.com/gaearon/babel-plugin-react-transform

enables hot reloading using HMR API
catches errors inside render()
renders an inline prop inspector
highlight components when updated

增加 --no-colors 属性，日志不输出颜色

服务器上构建的日志加了颜色代码，识别率很差。

map.json 路径生成异常

如果用户现在设置 webpack.config.js 配置如下

module.exports = function(webpackConfig) {
  webpackConfig.output = {
    path: join(process.cwd(), './www/')
  };
  return webpackConfig;
};

那么会导致文件生成在 www 目录下而 dist 下生成 map.json

原因出在这儿

https://github.com/ant-tool/atool-build/blob/master/src/build.js#L45

这对我们对外说的 webpack.config.js 可以覆盖内部逻辑不太相符合.

这边衍生出来的另外一个问题是如果用户在现有基础上只是需要再多配置一个 publicPath

那么目前是办不到. 因为自定义的 webpackConfig.output 会覆盖 atool-build 自带的 output , 后续对这一块需求如何考虑?

尝试升级到 webpack2-beta

新特性：
https://gist.github.com/sokra/27b24881210b56bbaff7

atool-build 缺少一份文档

文档里面需要大致说明下 atool-build 内置了哪些逻辑

以及如何写一份自定义的 webpack.config.js

css optimize (Remove unused CSS)

css-loader 里自带 cssnano，暂时没法处理这种情况

目前效果：

input

.hello {
  color: red;
}
.hello {
  color: blue;
}

output

.hello{color:red;color:blue;}

开启 babel-loader 的缓存功能，重复构建时性能应该可以提升一倍

https://github.com/babel/babel-loader

如何在atool-build的webpack配置文件中，添加新plugin？

webpackConfig.plugins.push(
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
      __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
    })
  );

会报错，说webpack not defined

构建时不需要清空指定的 outputPath 目录

atool-build -o xxx     // xxx 目录内的内容现在会被清空

希望直接构建并覆盖同名文件即可。

使用html-webpack-plugin后，dev下首次可以成功，修改代码后，无法在浏览器中看到页面

用antd-init出来的新工程，在webpack中加入html plugin，index.html删除js css的引入

webpack配置如下

var webpack = require('atool-build/lib/webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function(webpackConfig) {
  webpackConfig.module.loaders.forEach(function(loader) {
    if (loader.loader === 'babel') {
      // https://github.com/ant-design/babel-plugin-antd
      loader.query.plugins.push('antd');
    }
    return loader;
  });

  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    })
  );

  // Fix ie8 compatibility
  webpackConfig.module.loaders.unshift({
    test: /\.jsx?$/,
    loader: 'es3ify',
  });

  return webpackConfig;
};

报错：
DateTHead.js:15Uncaught TypeError: Super expression must either be null or a function, not undefined

无法修改内置的 UglifyJsPlugin 、DefinePlugin 等插件参数

之后需要考虑下如何把这些内置且无法修改参数的插件通过一种合理的方式让用户可以覆盖默认参数，或者传递参数.

DefinePlugin 现在在业务中有大量的需求.

如何简化构建的 log 信息

目前成功也会输出一大排信息。

atool-build

加两个 babel6 的插件，react 生产环境使用

babel-plugin-react-class-display-name
babel-plugin-react-remove-prop-types

请问npm package `antd-build` 与这个包什么关系？

antd-build 在 npm 上是 0.4.4 版本，而这个包是 0.3.1 版本，然后 github 链接指向这个包是什么意思呢？

支持 hash 模式

antd-build --hash

https://github.com/yiminghe/map-json-webpack-plugin

增加 dedupe 插件

http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
npm2 不自动抽重复依赖。

0.1.0

进展

jsx中通过<img src="xxx" />引用的图片访问不到

npm run dev启动本地环境开发，代码如下

export default class Layout extends Component {
  render() {
    return (
      <div className="af-container">
        <header>
          <img className="af-logo" src="./img/logo.png" alt="API工厂Logo" width="50" height="50" />
          <h1>Open API工厂</h1>
          <div>open.alibaba-inc.com</div>
          <img className="af-slogan" src="./img/slogan.png" alt="API工厂Slogan" width="215" height="22" />
        </header>
      </div>
    );
  }
}

引用的图片访问不到，也没有出现在dist文件夹下，怎么修改，能够正确链接图片。

不同几个entry可共同提取的公共模块不一定一致，atool-build怎么解决？

假设以下场景：

定义entry: [page1, page2, page3, page4]。page1与page2可共同提取模块com1，page3与page4可共同提取模块com2

查阅文档，感觉根据atto-build目前的配置，只能通过所有entry单独提取一个最大的公共模块，可这样会造成js文件十分庞大，没有意义地占用带宽。
请问如果使用atool-build，可否支持分开提取公共模块？

另，可以开放webpack的所有配置接口吗？这样感觉上也会比较灵活

0.6.0 需求收集

改进

构建日志不输出 uglifyjs 的 warning 信息，#50
修改 babel 和 UglifyJsPluginConfig 配置更简单，直接通过 webpackConfig.babel 调用，#58
js 里 require 的 html 文件会被复制到输出目录，#53
通过匹配 *.module.css 支持 css-modules，一种更好的 css 组织方式
添加 NoErrorsPlugin 插件，构建出错时不生成文件
支持 rucksack，详见 http://simplaio.github.io/rucksack/
支持 webpackConfig 处理了 i18n 后是数组的场景，#98
watch 模式下精简日志信息，#86
支持 decorator，#65

其他

test runner 改用 mocha
去除 object-assign 依赖，改用 ...

构建详细日志通过参数呈现

让用户自己去选择是否需要详细日志比如 --verbose

默认就给个简化的日志.

feature request - modifyVars at custom config

Looks like it's impossible to modify modifyVars, right now.

loader: _extractTextWebpackPlugin2.default.extract('css?sourceMap!' + 'postcss-loader!' + ('less?{"sourceMap":true,"modifyVars":' + JSON.stringify(pkg.theme || {}) + '}'))

So looks like 'package.json' is the only way right now, but i need differ path for assets in dev and prod modes, so i would like to modify 'modifyVars' inside of custom webpack config.

case: differ path for assets in dev/prod modes

it also will help to remove such hacks:

index.less

@import "~antd/style/themes/default/index.less";
@import "custom.less";
@import "~antd/style/core/index.less";

custom.less

@assets-url: "/assets/";
@icon-url: "@{assets-url}/fonts/ant-font/ant-font";
@dash-type-url: "@{assets-url}/images/dash-types";
@icon-type-url: "@{assets-url}/images/dashboard-icons";

in would like to do something like this case i could use modifyVars and set:

  webpackConfig.plugins.push(new webpack.DefinePlugin({
    'theme':  {
      'icon-url': 'assets/fonts/ant-font/ant-font',
      'assets-url': 'assets'
}
  }));

now i have to do it like this:

  var less_loader_id = null;

  webpackConfig.module.loaders.forEach(function(loader, loader_i) {
    if (loader.loader === 'babel') {
      // https://github.com/ant-design/babel-plugin-antd
      //loader.query.plugins.push('lodash');
      loader.query.plugins.push('antd');
    }

    if(process.env.PRODUCTION && loader.test && loader.test.toString() === (/\.less$/).toString() && loader.loader.indexOf('less?')) {
      less_loader_id = loader_i;
    }

    return loader;
  });

  //modify assets path for production
  if(less_loader_id !== null) {
    var loader = webpackConfig.module.loaders[less_loader_id];
    var query = loader.loader.substring(loader.loader.indexOf('less?') + 'less'.length);
    query = loaderUtils.parseQuery(query);
    query.modifyVars['access-url'] = '/admin/s/assets/';
    loader.loader = loader.loader.substring(0, loader.loader.indexOf('less?') + 'less?'.length) + JSON.stringify(query);
  }

升级到 webpack2, #64 (需进一步调研)
调整 babel presets 和 plugin 引入方式, #112
调整 config 扩展方式，#114

config 扩展参考

https://github.com/lewie9021/webpack-configurator

支持 i18n，webpackConfig 是数组的情况

使用 i18n-webpack-plugin 时，自定义的 webpack.config.js 无法满足要求。

见 https://github.com/webpack/webpack/tree/master/examples/i18n ，要求配置是一个数组，而 atool-build 报错，如下：

/Users/boom/Workplace/antd/ibops/node_modules/atool-build/lib/build.js:14
  _rimraf2.default.sync(webpackConfig.output.path);
                                            ^

TypeError: Cannot read property 'path' of undefined
    at exports.default (/Users/boom/Workplace/antd/ibops/node_modules/atool-build/lib/build.js:14:45)
    at Object.<anonymous> (/Users/boom/Workplace/antd/ibops/node_modules/atool-build/bin/atool-build:15:24)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:467:10)
    at startup (node.js:136:18)
    at node.js:963:3

编译的时候把stderr 和 stdout分开

现在日志全都打到stdout里，错误日志看起来很麻烦，把error和info分开，有利于排查问题

atool-build 2>&1 > /dev/null 这样就能只看error

map.json 的值里添加 pkg.name

慕陶的需求，map.json 现在是：

{
  "common.js": "common-{hash}.js",
}

需要改成：

{
  "common.js": "{pkg.name}/common-{hash}.js",
}

https://github.com/yiminghe/map-json-webpack-plugin/blob/master/index.js#L7

改造成 cluster 的方式，支持 crash 日志收集

ant-tool/atool-monitor#1

tnpm@4

两个问题：

是否兼容，主要是改写了 babel-core 的 resolve，看下路径是否有问题
babel 运行是否缓慢

package.json 中files转entry
利用 gauge 和 ProgressPlugin 显示进度
移除了CommonsChunkPlugin
webpack 暴露给webpack.config.js

目前server直接调用的webpack-dev-server，坐等atool-server啊！！！！

npm WARN deprecated [email protected]: Please use postcss-loader instead of autoprefixer-loader

在 spm 中已经使用 postcss 许久了

目前发现和以往有差异的点就是顺序问题 .

举个例子

a.js 中 require 了 a.css 和 b.css
b.js 中 require 了 b.css 和 a.css

在 postcss 是会报错. 严格意义上这是正确的，因为 a.css 和 b.css 完全可能存在覆盖的关系.

跟进：es6 import 方式的按需打包

Multi config 时是否考虑过采用多进程提高速度？

如：

# Main process
const cp = require('child_process');
for(let entry of entries) {
  let worker = cp.fork(__dirname + '/worker.js');
  worker.on('message', function (msg) {
    worker.kill();
  });
  worker.send(entry);
}

# worker.js
function doneHandler(err, stats) {
  ...
  process.send('done');
}
process.on('message', (entry) => {
  const config = getConfig();
  config.entry = entry;
  ...

  const compiler = webpack(config);
  compiler.run(doneHandler);
});

PS: 线程管理可以采用 https://github.com/thisandagain/fork-pool

import react-component项目中的css，编译报错

import 'react-colors-picker/assets/index.css';

报错信息：

 ERROR in ./~/atool-build/~/css-loader?sourceMap&-restructuring!./~/atool-build/~/postcss/lib/postcss.js!./~/react-colors-picker/assets/index.css

    Module build failed: Error: 
  is not a PostCSS plugin
        at Processor.normalize (/Users/foria/work/socialmng/ANT00910801_20160308_socialmng/static/node_modules/atool-build/node_modules/postcss/lib/processor.js:60:23)
        at new Processor (/Users/foria/work/socialmng/ANT00910801_20160308_socialmng/static/node_modules/atool-build/node_modules/postcss/lib/processor.js:23:29)
        at Object.postcss (/Users/foria/work/socialmng/ANT00910801_20160308_socialmng/static/node_modules/atool-build/node_modules/postcss/lib/postcss.js:55:12)

版本："atool-build": "~0.6.1"
node : v5.3.0

"devDependencies": {
    "babel-core": "^6.4.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-register": "^6.6.5",
    "dora": "0.2.x",
    "dora-plugin-atool-build": "0.4.x",
    "dora-plugin-hmr": "^0.2.x",
    "dora-plugin-livereload": "^0.2.0",
    "dora-plugin-proxy": "^0.5.x",
    "eslint": "~1.10.3",
    "eslint-config-airbnb": "~2.1.0",
    "eslint-plugin-react": "~3.12.0"
  },
  "entry": {
    "app": "./app.jsx"
  },
  "dependencies": {
    "@alipay/ajax": "~2.0.6",
    "antd": "~0.12.8",
    "@alipay/rc-g2": "~2.0.0-beta2",
    "atool-build": "~0.6.1",
    "babel-plugin-antd": "^0.1.3",
    "babel-polyfill": "~6.5.0",
    "css-animation": "~1.0.3",
    "es5-shim": "~4.0.5",
    "events": "~1.0.1",
    "flux": "~2.0.3",
    "gregorian-calendar": "~3.0.0",
    "gregorian-calendar-format": "~3.0.1",
    "jquery": "~2.2.1",
    "jsuri": "~1.3.0",
    "keymirror": "~0.1.1",
    "object-assign": "~2.0.0",
    "react": "~0.14.7",
    "react-dom": "~0.14.7",
    "react-router": "~2.0.0",
    "react-colors-picker": "~2.3.0",
    "store": "~1.3.16",
    "react-addons-linked-state-mixin": "~0.14.7"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": [
      "add-module-exports"
    ]
  }

@base_url: './images/';

.backgroundImage(@url) {
  background-image: url('@{base_url}@{url}.png');
  background-image: e("url('@{base_url}x/@{url}.png')\9");
}


#root {
  .backgroundImage('alipayIcon');
}

write like this, with atool, it will fail to compile less.

Then I write a webpack loader demo to compile this,

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.less$/, loader: "style!css!less" },
            { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
        ]
    }
};

It can work well, so it seems a atool problem to compile less

compile this online

ant-tool / atool-build Goto Github PK

atool-build's Introduction

atool-build

特性

安装

使用

命令行参数

配置扩展

FAQ

atool-build's People

Contributors

Stargazers

Watchers

Forkers

atool-build's Issues

进展

改进

其他

Recommend Projects

Recommend Topics

Recommend Org

Jobs