Clipped.js | Webpack 應該這樣用

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

Clipped.js 用preset的概念令用現有的配置在新的項目直接使用,並能夠輕鬆做調整。react


快速上手

關於安裝直接查看官網webpack

$ npm i -g clipped
$ clipped init
$ clipped dev
複製代碼

概念

Preset 概念

其實只要你的project有 clipped.config.js, 即是一個Preset。若是你看在快速上手的項目, 裏面的 clipped.config.js 是這樣的:git

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

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

但那些打包工具好比 Webpack, Rollup 運行時須要的參數在哪?web

Jointed 概念

clipped.config 是一個Jointed。你仍能夠當它是普通Object:npm

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

但你能夠用的更帥氣 ;)bash

// 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:babel

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')]
      ]
    })
複製代碼

那調整好了參數,怎樣使用呢?app

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的更多用法。

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

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

相關文章
相關標籤/搜索