Clipped.js | Webpack 應該這樣用

現有的前端/後端打包工具都是一次性的，不能在多個之間復用。

Clipped.js 用preset的概念令用現有的配置在新的項目直接使用，並可以輕鬆作調整。

---

快速上手

關於安裝直接查看官網。

$ npm i -g clipped
$ clipped init
$ clipped dev

概念

Preset 概念

其實只要你的project有 clipped.config.js, 便是一個Preset。如果你看在快速上手的項目, 裏面的 clipped.config.js 是這樣的：

module.exports = async clipped => {
    await clipped.use(require('clip-webpack-frontend'))
}

在 Clipped.js, preset 是通過一個個傳入 clipped的 async function 調整配置, 並用clipped.use 來引用其他 preset。這樣調整過程非常靈活。

但那些打包工具比如 Webpack, Rollup 運行時需要的參數在哪？

Jointed 概念

clipped.config 是一個Jointed。你仍可以當它是普通Object:

module.exports = async clipped => {
    clipped.config.webpack = {
        entry: {},
        output: {},
        module: {
            rules: []
        }
        plugins: []
    }
    
    clipped.config.webpack.entry.index = ['src/app.js']
}

但你可以用的更帥氣 ;)

// clip-example
clipped.config.webpack
    .set('entry.vendor', ['react', 'd3'])
    .set('module.rules.babel', {
        test: /\.jsx?$/,
        include: [clipped.config.src],
        loader: require.resolve('babel-loader'),
        options: {
          presets: [
            [require.resolve('babel-preset-env'), { modules: false }]
          ]
        }
    })

然後在之後的preset:

clipped.use(require('clip-example'))
//  Support flowtype and backpack
clipped.config.webpack
  .set('module.rules.babel.options', {
      presets: [
        [require.resolve('babel-preset-backpack')],
        [require.resolve('babel-preset-flow')]
      ]
    })

那調整好了參數，怎樣使用呢？

Hook 概念

Hook 其實就是 npm script 的強化版，舉個例子：

clipped.hook('build')
  .add('webpack-build', clipped => 
    new Promise((resolve, reject) => {
      const webpackInstance = webpack(clipped.config.webpack.toJSON())
        webpackInstance.run((err, stats = {}) => {
          if (err || stats.hasErrors()) {
            reject(err)
          }
          resolve()
        })
    })
  )

將 clipped.config.webpack 變爲JSON, 並給webpack運行。然後只要：

$ clipped build

便可使用。

總結

可以在官網上查看關於Clipped.js的更多用法。

如果你覺得它有用, 請給我們一顆星 ༼ つ ◕_◕ ༽つ

項目是開源的，我們歡迎任何貢獻 :)