spm to atool-build

spm to atool-build

spm.output

spm.output

{
  "output": [
    "./src/index.js",
    "./src/indexb.js",
    "./src/afwealth/*.js"
    "./src/index.css",
    "./src/x.css",
    "./index.html",
    "./fav.icon",
    "./src/img/test.png"
  ]
}

在 spm 中，在 package.json 的 output 内可以指定具体需要打包的条目。

在 atool-build 存在类似配置，但是不能完全实现这样操作。

类似功能在 atool-build 中叫 entry

所以一份 atool 中的配置是这样的

package.json

{
  "entry": {
    "index" : "./src/index.js",
    "indexb" : "./src/indexb.js"
  }
}

注意

在 atool 中 entry 默认只支持 js. 同时 entry 中的 key 对应最终打包出来的文件中会含有 key.js , common.js , key.css, common.css (如果没有样式文件则没有 css 文件)

所以如上 entry 最终可能打包出来的文件是 index.js , indexb.js common.js , index.css , indexb.css , common.css

案例

如何实现通配符 "./src/afwealth/*.js" ？

首先你需要了解下 webpack.config.js

我们可以通过 webpack.config.js 将 atool-build 内置的 webpack 配置进一步进行处理（添加一些 loader，plugin 等），得到项目实际需要的效果。webpack.config.js 里有一个函数，会将内置的 webpack 配置对象作为参数，而这个函数的返回值会作为新的 webpack 配置对象。所以，我们只需要改变这个对象就可以完成个性化配置。

所以方案便可以是利用 node 读取某个文件夹下的所有文件名，并通过正则筛选出最终需要的 .js 文件，并最后 push 到 entry 这个数组中。
如何实现样式文件的导出 "./src/x.css" ？
- 如果该 x.css 已经被某脚本如 xx.js 中有引用到，那么不必专门进行设置导出,默认配置中会生成与脚本同名的样式文件即 xx.css 该样式文件包含了所有的脚本所依赖的样式文件。
- 如果该 x.css 不得不进行导出，可以有的方案是，新建一个脚本文件，如 x.js，并在 entry 中进行如下的设置
```
{
  "entry": {
    "xx" : "path/to/xx.js",
    "x" : ["path/to/x.js"]
  }
}
```
  为什么是 [] 呢？不设置 Mutiple Entry 会得到如下报错 Module not found: Error: a dependency to an entry point is not allowed
警告虽然在 entry 中也可以直接设置 css 或者 less 但是实际操作中 webpack 还是会把他先当成一个脚本再抽取样式，所以此时构建目录中会多一个和样式文件同名的脚本，并不推荐直接在 entry 中写样式.
如何实现 html 的导出比如 "./src/index.html" ？在 atool-build 中默认不支持 html, 目前正在考虑是否需要集成，详见issue
- 如果只是想完成简单的拷贝功能
```
module.exports = function(webpackConfig) {
  webpackConfig.module.loaders.push({ test: /\.html$/, loader: 'file?name=[name].[ext]' })
  return webpackConfig;
};
```
  从此边可以在对应的脚本中 require('path/to/html')
- 如果想完成更加复杂的功能，比如 minify or html tpl 则可以考虑使用其他社区更加强大的 loader 或者 plugin 。比如 html-loader, html-webpack-plugin, plugin 使用可以参考如下添加一个plugin

spm.global

spm.global

在 atool-build 中需要自定义 webpack.config.js 来实现

module.exports = function(webpackConfig) {
  webpackConfig.externals = {
     jquery: "jQuery",
  };
  return webpackConfig;
};

关于更多 externals 请查看 webpack#externals

spm.node

spm.node

配置引入 node 相关的补丁。

在 atool-build 中需要自定义 webpack.config.js 来实现

举例：如果在你的业务代码中也需要 node 中的 url 可以通过如下实现

module.exports = function(webpackConfig) {
  webpackConfig.node = {
     url: true,
  };
  return webpackConfig;
};

构建时会把适配于浏览器的 url 也打包在内.

node 的默认配置为

// Default:
{
  console: false,
  global: true,
  process: true,
  Buffer: true,
  __filename: "mock",
  __dirname: "mock",
  setImmediate: true
}

关于更多 node 请查看 webpack#externals

另外参考代码有 Profill

spm.vendor

spm.vendor

vendor 在 webpack 中对应的功能点是 CODE SPLITTING 也可以在此查看 webpack 对其的一些说明参考链接

功能点：代码分割，需要配合插件 CommonsChunkPlugin

举例来说

现在我们在业务中有两个页面，pageA 和 pageB

pageA
- jquery
- util1
pageB
- underscore
- util1
- util2

现在我们需要抽取 jquery 和 underscore 。此时基于 atool-build 我们需要怎么做呢?

第一步在 package.json 的 entry 予以说明

"entry": {
 "pageA": "path/to/pageAEntry",
 "pageB": "path/to/pageBEntry",
 "vendor": ["jquery", "undersocre"]
}

第二步由于 atool-build 中内置了CommonsChunkPlugin 并且也有默认的配置在此我们需要去覆盖它。

var webpack = require('atool-build/lib/webpack');
module.exports = function(webpackConfig) {
 webpackConfig.plugins.some(function(plugin, i){
   if(plugin instanceof webpack.optimize.CommonsChunkPlugin) {
     webpackConfig.plugins.splice(i, 1, new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'));
     return true;
   }
 });
 return webpackConfig;
};

那么最后构建出来的文件中会有 vendor.bundle.js 其中代码中包含了 webpack runtime, jquery 和 underscore 。并且最后在业务项目中使用时，需要使用如下这个方式，以 pageA 为例

<script src="path/to/vendor.bundle.js"></script>
<script src="path/to/pageA.js"></script>

spm.common

spm.common

如上条所述，在 atool-build 中已经内置了 common 的功能，默认开启.

common 是自主性的动作作为用户不需要配置哪些是公共 chunk 。而 vendor 是被动性的。

最后我们在页面上引用的时候需要如下方式：

<script src="path/to/common.js"></script>
<script src="path/to/your/entry.js"></script>

如果你并不想启用 common 该如何使用呢？添加 webpack.config.js

var webpack = require('atool-build/lib/webpack');
module.exports = function(webpackConfig) {
  webpackConfig.plugins.some(function(plugin, i){
    if(plugin instanceof webpack.optimize.CommonsChunkPlugin) {
      webpackConfig.plugins.splice(i, 1);
      return true;
    }
  });
  return webpackConfig;
};

如果你同时想拥有 vendor 和 common 。如 vendor 示例中所示，在 entry 中添加 vendor 配置，再添加 webpack.config.js

var webpack = require('atool-build/lib/webpack');
module.exports = function(webpackConfig) {
  webpackConfig.plugins.some(function(plugin, i){
    if(plugin instanceof webpack.optimize.CommonsChunkPlugin) {
      webpackConfig.plugins.splice(i, 1, new webpack.optimize.CommonsChunkPlugin({
        names: ["common", "vendor"],
        minChunks: 2
      }));
      return true;
    }
  });
  return webpackConfig;
};

更多 commonschunkplugin 参数参考示例

spm.base64

spm.base64

在 atool-build 中已经内置了对 base64 的支持, 更确切说是对 data url, 而完成该工作的正是 webpack 的 url-loader

相关配置可以在源码中查看 atool-build 中关于关于 url-loader 配置

配置默认对 10kb 的文件都会做 data url 的处理。并且把相关文件路径提取到根路径，文件名 hash 化。

如何配置默认对 20kb 的图片文件都会做 data url 的处理？书写 webpack.config.js 覆盖 atool-build 中处理图片的 loader 配置

webpackConfig.module.loaders.some(function(loader) {
  if (loader.loader === 'url?limit=10000') {
    loader.loader = 'url?limit=20000';
    return true;
  }
});

如何除去对图片文件的 data url 的处理？这边就牵扯到如何使用 loader 了。查看 url-loader 的文档，便可以看到如下说明

The url loader works like the file loader, but can return a Data Url if the file is smaller than a limit. If the file is greater than the limit the file-loader is used and all query parameters are passed to it.
```
webpackConfig.module.loaders.some(function(loader) {
  if (loader.loader === 'url?limit=10000') {
    loader.loader = 'file?name=[name].[ext]'
    return true;
  }
});
```

如何不对图片的文件名hash化，并保留原有路径？

webpackConfig.module.loaders.some(function(loader) {
  if (loader.loader === 'url?limit=10000') {
    loader.loader = 'file?name=[path][name].[ext]'
    return true;
  }
});

更多参数请参考 [file-loader](https://github.com/webpack/file-loader)

spm.babel

spm.babel

在 atool-build 中我们对 js 和 jsx 文件的配置如下

{
  presets: ['es2015', 'react', 'stage-0'],
  plugins: ['add-module-exports', 'typecheck'],
}

更多的配置详见 babel.options

在这边目前遇到的业务中可能出现的问题是: 在 es2015 规范中需要对脚本文件启用严格模式，即在脚本代码前默认添加 "use strict", 但是这些一些老的业务系统里面可能行不通，由于个别用法会导致出错。如何避免出现这个问题呢？

webpackConfig.module.loaders.some(function(loader) {
  var needFixBabelOptionCount = 2;
  if (loader.loader === 'babel') {
    needFixBabelOptionCount --;
    loader.query.presets = ['es2015-without-strict', 'react', 'stage-0'];
    if (needFixBabelOptionCount == 0) {
      return true;
    };     
  }
});

spm.uglify

spm.uglify

在 atool-build 内置了 UglifyJsPlugin

new webpack.optimize.UglifyJsPlugin({
  output: {
    ascii_only: true,
  },
  compress: {
    warnings: false,
  },
})

目前暂时没有方式能够覆盖这个配置，但是后续应该会开放参数，这会在之后的变更中予以更新，查看 issue 以查看最新进展

在使用 atool-build 时可以通过添加 --no-compress 的方式对源码不进行压缩。 /to/your/atool-build --no-compress

spm.autoprefixer

spm.autoprefixer

在 atool-build 中已经内置了对 autoprefixer

如何给 autoprefixer 添加相关配置呢？目前暂时没有直接传参的方式，但是还是有办法尝试覆盖，在 webpack.config.js 中单独引入 autoprefixer

var webpack = require('atool-build/lib/webpack');
var autoprefixer = require('autoprefixer');
module.exports = function(webpackConfig) {
  webpackConfig.postcss.some(function (plugin,i) {
  if (plugin.postcss.postcssPlugin === 'autoprefixer') {
    webpackConfig.postcss.splice(i, 1, autoprefixer({ browsers: ['last 2 versions'] }));
    return true;
  }
});
  return webpackConfig;
};

spm.dest

spm.dest

在 atool-build 中，我们可以使用构建参数来指定需要构建到的目录 -o

即

/to/your/atool-build -o ./www

当然我们也可以使用 webpack.config.js 来达到设置构建目录的目的, 使用 assign 是我只想要替换 output.path

var webpack = require('atool-build/lib/webpack');
var assign = require('object-assign');
module.exports = function(webpackConfig) {
  var preOutput = webpackConfig.output;
  webpackConfig.output = assign(preOutput, {
    path: join(process.cwd(), './www/'),
  });
  return webpackConfig;
};

更多 output 参数

spm.hash

spm.hash

在 atool-build 中，我们可以使用构建参数来指定需要构建到的目录 —hash

即

/to/your/atool-build -o ./www --hash

在使用 hash 构建后, 在构建文件夹中生成映射表 map.json

诸如

{
  "spm2atool/common.js": "spm2atool/common-8a88e1a952820cb5d6f0.js",
  "spm2atool/c.js": "spm2atool/c-e25ee7b379a3fc0b08bc.js",
  "spm2atool/vendor.js": "spm2atool/vendor-ed4ac329980b6a5dca78.js",
  "spm2atool/c.css": "spm2atool/c-e25ee7b379a3fc0b08bc.css"
}

spm.extractCSS

spm.extractCSS

在 webpack 中对应的是插件 ExtractTextPlugin atool-build 中我们对其进行了内置，构建工具主动会对 css 和 less 文件默认会抽取成独立的文件。

如果有些组件需要内置样式，可能并不需要该功能。那么把如上 css 和 less 的 loader 进行替换。这边就不在阐述，可以参考如上案例。

spm.library 相关

spm.library spm.libraryTarget spm.umd

这三种对应在 webpack 中分别是：

library 如果配置了，则作为类库输出，library 为类库名
libraryTarget 配置输出格式，默认 var, 可选 var, this, commonjs, commonjs2, amd, umd
umd 配置输出格式为 umd，并指定类库名。

案例

如何配置 library, libraryTarget 呢？

var assign = require('object-assign');
module.exports = function(webpackConfig) {
  var preOutput = webpackConfig.output;
  webpackConfig.output = assign(preOutput, {
    path: join(process.cwd(), './www/'),
    library: 'pigcan',
    libraryTarget: 'this'
  });
  return webpackConfig;
};

spm.loader

spm.loader

可以在 webpack 官网 很多的 loader 自行挑选自己所需的吧.

案例：需要压缩 html-minify 这个loader

第一步安装 html-minify 这个 loader 即 npm install html-minify-loader --save-dev
第二步建立 webpack.config.js

第三步编辑如上配置文件

var html-minify = 
module.exports = function(webpackConfig) {
 webpackConfig.module.loaders.push({
   test: /\.html$/,
   name: "mandrillTemplates",
   loader: 'raw!html-minify'
 });
 return webpackConfig;
}

spm.define

spm.define

在 atool-build 中已经内置了 DefinePlugin