VueJS: Modules

Các mô-đun là các tiện ích mở rộng Nuxt.js có thể mở rộng chức năng cốt lõi của nó và thêm các tích hợp vô tận.

Giới thiệu

Trong khi phát triển các ứng dụng cấp sản xuất với Nuxt, bạn sẽ sớm phát hiện ra rằng chức năng cốt lõi của khung là không đủ. Nuxt có thể được mở rộng với các tùy chọn cấu hình và plugin, nhưng việc duy trì các tùy chỉnh này trên nhiều dự án là tẻ nhạt, lặp đi lặp lại và tốn thời gian. Mặt khác, việc hỗ trợ mọi nhu cầu của dự án sẽ giúp Nuxt trở nên rất phức tạp và khó sử dụng.

Đây là một trong những lý do tại sao Nuxt cung cấp một hệ thống mô-đun bậc cao hơn giúp dễ dàng mở rộng lõi. Các mô-đun chỉ đơn giản là các chức năng được gọi tuần tự khi khởi động Nuxt. Khung chờ cho mỗi mô-đun kết thúc trước khi tiếp tục. Theo cách này, các mô-đun có thể tùy chỉnh hầu hết mọi khía cạnh của Nuxt. Nhờ thiết kế mô-đun của Nuxt (dựa trên Tapable của webpack ), các mô-đun có thể dễ dàng đăng ký móc cho một số điểm nhập nhất định như khởi tạo trình tạo. Các mô-đun cũng có thể ghi đè các mẫu, định cấu hình trình tải webpack, thêm thư viện CSS và thực hiện nhiều tác vụ hữu ích khác.

Tốt nhất của tất cả, các mô-đun Nuxt có thể được tích hợp vào các gói npm. Điều này giúp họ dễ dàng sử dụng lại trên các dự án và chia sẻ với cộng đồng Nuxt, giúp tạo ra một hệ sinh thái các tiện ích bổ sung Nuxt chất lượng cao.

Các mô-đun là tuyệt vời nếu bạn:

• Là thành viên của một nhóm nhanh nhẹn cần nhanh chóng khởi động các dự án mới.
• Bạn mệt mỏi với việc phát minh lại bánh xe cho các nhiệm vụ phổ biến như tích hợp Google Analytics.
• Là một người đam mê mã nguồn mở đáng yêu , người muốn dễ dàng chia sẻ công việc của bạn với cộng đồng.
• Là thành viên của một công ty doanh nghiệp coi trọng chất lượng và tái sử dụng .
• Thường xuyên chống lại thời hạn ngắn và không có thời gian để tìm hiểu chi tiết về mọi thư viện hoặc tích hợp mới.
• Bạn cảm thấy mệt mỏi với việc xử lý các thay đổi đối với các giao diện cấp thấp và cần những thứ chỉ hoạt động ™ .

Viết mô-đun cơ bản

Như đã đề cập các mô-đun chỉ là các chức năng đơn giản. Chúng có thể được đóng gói dưới dạng các mô-đun npm hoặc được bao gồm trực tiếp trong mã nguồn dự án.

mô-đun / simple.js

export default function SimpleModule (moduleOptions) {
  // Write your code here
}

// REQUIRED if publishing the module as npm package
// module.exports.meta = require('./package.json')

moduleOptions

Đây là đối tượng được truyền qua sử dụng modulesmảng bởi người dùng, chúng ta có thể sử dụng nó để tùy chỉnh hành vi của nó.

this.options

Bạn có thể truy cập trực tiếp các tùy chọn Nuxt bằng cách sử dụng tài liệu tham khảo này. Đây là nội dung của người dùng nuxt.config.jsvới tất cả các tùy chọn mặc định được gán cho. Nó có thể được sử dụng cho các tùy chọn chia sẻ giữa các mô-đun.

this.nuxt

Đây là một tham chiếu đến ví dụ Nuxt hiện tại. Tham khảo tài liệu lớp Nuxt để biết các phương thức có sẵn .

this

Bối cảnh của các mô-đun. Vui lòng xem tài liệu của lớp ModuleContainer để biết các phương thức khả dụng.

module.exports.meta

Dòng này là bắt buộc nếu bạn đang xuất bản mô-đun dưới dạng gói npm. Nuxt trong nội bộ sử dụng meta để làm việc tốt hơn với gói của bạn.

nuxt.config.js

export default {
  modules: [
    // Simple usage
    '~/modules/simple'

    // Passing options directly
    ['~/modules/simple', { token: '123' }]
  ]
}

Sau đó chúng tôi yêu cầu Nuxt tải một số mô-đun cụ thể cho một dự án với các tham số tùy chọn làm tùy chọn. Vui lòng tham khảo tài liệu cấu hình mô-đun để biết thêm thông tin!

Mô-đun Async

Không phải tất cả các mô-đun sẽ làm mọi thứ đồng bộ. Ví dụ: bạn có thể muốn phát triển một mô-đun cần tìm nạp một số API hoặc thực hiện IO không đồng bộ. Đối với điều này, Nuxt hỗ trợ các mô-đun không đồng bộ có thể trả lại Lời hứa hoặc gọi lại.

Sử dụng async / await

import fse from 'fs-extra'

export default async function asyncModule() {
  // You can do async works here using `async`/`await`
  let pages = await fse.readJson('./pages.json')
}

Trả lại một lời hứa

import axios from 'axios'

export default function asyncModule() {
  return axios.get('https://jsonplaceholder.typicode.com/users')
    .then(res => res.data.map(user => '/users/' + user.username))
    .then(routes => {
      // Do something by extending Nuxt routes
    })
}

Đoạn trích thông thường

Tùy chọn cấp cao nhất

Đôi khi sẽ thuận tiện hơn nếu chúng ta có thể sử dụng các tùy chọn cấp cao nhất trong khi đăng ký các mô-đun nuxt.config.js. Điều này cho phép chúng tôi kết hợp nhiều nguồn tùy chọn.

nuxt.config.js

export default {
  modules: [
    ['@nuxtjs/axios', { anotherOption: true }]
  ],

  // axios module is aware of this by using `this.options.axios`
  axios: {
    option1,
    option2
  }
}

module.js

export default function (moduleOptions) {
  // `options` will contain option1, option2 and anotherOption
  const options = Object.assign({}, this.options.axios, moduleOptions)

  // ...
}

Cung cấp plugin

Điều phổ biến là các mô-đun cung cấp một hoặc nhiều plugin khi được thêm vào. Ví dụ , mô-đun bootstrap-vue sẽ yêu cầu đăng ký chính nó vào Vue. Trong những tình huống như vậy chúng ta có thể sử dụng người this.addPlugintrợ giúp.

plugin.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

Vue.use(BootstrapVue)

module.js

import path from 'path'

export default function nuxtBootstrapVue (moduleOptions) {
  // Register `plugin.js` template
  this.addPlugin(path.resolve(__dirname, 'plugin.js'))
}

Plugin mẫu

Các mẫu và plugin đã đăng ký có thể tận dụng các mẫu lodash để thay đổi có điều kiện đầu ra của các plugin đã đăng ký.

plugin.js

// Set Google Analytics UA
ga('create', '<%= options.ua %>', 'auto')

<% if (options.debug) { %>
// Dev only code
<% } %>

module.js

import path from 'path'

export default function nuxtBootstrapVue (moduleOptions) {
  // Register `plugin.js` template
  this.addPlugin({
    src: path.resolve(__dirname, 'plugin.js'),
    options: {
      // Nuxt will replace `options.ua` with `123` when copying plugin to project
      ua: 123,

      // conditional parts with dev will be stripped from plugin code on production builds
      debug: this.options.dev
    }
  })
}

Thêm thư viện CSS

Nếu mô-đun của bạn sẽ cung cấp thư viện CSS, hãy đảm bảo thực hiện kiểm tra xem người dùng đã bao gồm thư viện để tránh trùng lặp chưa và thêm tùy chọn để vô hiệu hóa thư viện CSS trong mô-đun.

module.js

export default function (moduleOptions) {
  if (moduleOptions.fontAwesome !== false) {
    // Add Font Awesome
    this.options.css.push('font-awesome/css/font-awesome.css')
  }
}

Phát ra tài sản

Chúng tôi có thể đăng ký plugin webpack để phát ra tài sản trong quá trình xây dựng.

module.js

export default function (moduleOptions) {
  const info = 'Built by awesome module - 1.3 alpha on ' + Date.now()

  this.options.build.plugins.push({
    apply (compiler) {
      compiler.plugin('emit', (compilation, cb) => {

        // This will generate `.nuxt/dist/info.txt' with contents of info variable.
        // Source can be buffer too
        compilation.assets['info.txt'] = { source: () => info, size: () => info.length }

        cb()
      })
    }
  })
}

Đăng ký bộ tải webpack tùy chỉnh

Chúng ta có thể làm tương tự như build.extendtrong nuxt.config.jsviệc sử dụng this.extendBuild.

module.js

export default function (moduleOptions) {
    this.extendBuild((config, { isClient, isServer }) => {
      // `.foo` Loader
      config.module.rules.push({
        test: /\.foo$/,
        use: [...]
      })

      // Customize existing loaders
      // Refer to source code for Nuxt internals:
      // https://github.com/nuxt/nuxt.js/tree/dev/packages/builder/src/webpack/base.js
      const barLoader = config.module.rules.find(rule => rule.loader === 'bar-loader')
  })
}

Chạy các tác vụ trên các móc cụ thể

Mô-đun của bạn có thể chỉ cần thực hiện mọi thứ trong các điều kiện cụ thể và không chỉ trong quá trình khởi tạo Nuxt. Chúng tôi có thể sử dụng hệ thống Hookable Nuxt.js mạnh mẽ để thực hiện các tác vụ trên các sự kiện cụ thể. Nuxt sẽ đợi chức năng của bạn nếu nó trả về một Promise hoặc được định nghĩa là async.

Dưới đây là một số ví dụ cơ bản:

export default function myModule() {

  this.nuxt.hook('modules:done', moduleContainer => {
    // This will be called when all modules finished loading
  })

  this.nuxt.hook('render:before', renderer => {
    // Called after the renderer was created
  })

  this.nuxt.hook('build:compile', async ({name, compiler }) => {
    // Called before the compiler (default: webpack) starts
  })

  this.nuxt.hook('generate:before', async generator => {
    // This will be called before Nuxt generates your pages
  })
}

Lệnh gói mô-đun

Thử nghiệm

Bắt đầu v2.4.0, bạn có thể thêm các lệnh nuxt tùy chỉnh thông qua gói của mô-đun Nuxt. Để làm như vậy, bạn phải tuân theo NuxtCommandAPI khi xác định lệnh của mình. Một ví dụ đơn giản giả thuyết được đặt trong my-module/bin/command.jshình như thế này:

#!/usr/bin/env node

const consola = require('consola')
const { NuxtCommand } = require('@nuxt/cli')

NuxtCommand.run({
  name: 'command',
  description: 'My Module Command',
  usage: 'command <foobar>',
  options: {
    foobar: {
      alias: 'fb',
      type: 'string',
      description: 'Simple test string'
    }
  },
  run(cmd) {
    consola.info(cmd.argv)
  }
})

Một vài điều cần lưu ý ở đây. Đầu tiên, hãy chú ý lệnh gọi /usr/bin/envđể lấy Node thực thi. Cũng lưu ý rằng cú pháp mô-đun ES không thể được sử dụng cho các lệnh trừ khi bạn kết hợp thủ công esmvào mã của mình.

Tiếp theo, bạn sẽ chú ý cách NuxtCommand.run()sử dụng để chỉ định cài đặt và hành vi của lệnh. Các tùy chọn được xác định trong optionsđó, được phân tích cú pháp thông qua minimist. Khi các đối số được phân tích cú pháp, run()sẽ tự động được gọi với NuxtCommandthể hiện là tham số đầu tiên.

Trong ví dụ trên, cmd.argvđược sử dụng để truy xuất các đối số dòng lệnh được phân tích cú pháp. Có nhiều phương thức và thuộc tính trong NuxtCommand- tài liệu về chúng sẽ được cung cấp vì tính năng này được tiếp tục thử nghiệm và cải thiện.

Để làm cho lệnh của bạn có thể được nhận dạng bởi Nuxt CLI, hãy liệt kê nó trong binphần của gói.json, sử dụng nuxt-modulequy ước, trong đó moduleliên quan đến tên gói của bạn. Với nhị phân trung tâm này, bạn có thể sử dụng argvđể phân tích cú pháp nhiều hơn subcommandscho lệnh của bạn nếu bạn muốn.

{
  "bin": {
    "nuxt-foobar": "./bin/command.js"
  }
}

Khi gói của bạn được cài đặt (thông qua NPM hoặc Sợi), bạn sẽ có thể thực thi nuxt foobar ...trên dòng lệnh.