Clipped.js | Webpack 應該這樣用

inizio發表於2019-03-02
JSWeb

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

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

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

專案是開源的，我們歡迎任何貢獻 ?

相關文章