Tùy chỉnh Poi trong ứng dụng Vue.js

Cài đặt ứng dụng Vue.js với Poi là một trải nghiệm khá dễ dàng và thú vị, rất nhiều điều kỳ diệu đang diễn ra. Nhưng nếu ta cần tùy chỉnh nó thì sao?

Poi làm cho nó dễ dàng và có nhiều cách khác nhau để tùy chỉnh.

File cấu hình

Bạn có thể tạo một poi.config.js ở cùng cấp với package.json mà Poi sẽ hiểu theo quy ước. Nếu muốn, bạn có thể thay đổi đường dẫn bằng cách sử dụng tùy chọn --config [path] trong CLI.

Tệp cấu hình có cấu trúc tương tự như file Webpack. Một số tùy chọn trực tiếp là tùy chọn của một plugin Webpack.

Hãy xem một số tùy chỉnh phổ biến mà ta có thể thực hiện.

Đầu ra HTML

Poi sử dụng html-webpack-plugin bên dưới. Nếu bạn xem mẫu mặc định , bạn sẽ thấy rằng tiêu đề và mô tả có thể cấu hình , vì vậy bạn có thể tùy chỉnh chúng:

poi.config.js

module.exports = {
  html: {
    title: 'Coolgator',
    description: 'Cool and hungry alligator'
  }
};

Bạn có thể sử dụng dữ liệu từ package.json , đây là một mẫu phổ biến:

poi.config.js

const pkg = require('./package.json');

module.exports = {
  html: {
    title: 'Coolgator',
    description: pkg.description
  }
};

Tuy nhiên, mẫu mặc định khá hạn chế để tùy biến. Tuy nhiên, đừng lo lắng, bạn có thể sử dụng mẫu của riêng mình. Tạo một index.ejs ở cùng cấp với file poi.config.js và thêm vào danh sách các <icon> s:

index.ejs

<head>
...
  <% htmlWebpackPlugin.options.icons.forEach(function(icon) { %>
    <link rel="icon" sizes="icon.size" href="<%= icon.url %>">
  <% }); %>
...
</head>

Sau đó, thêm thuộc tính icons :

poi.config.js

const pkg = require('./package.json');

module.exports = {
  html: {
    title: 'Coolgator',
    description: pkg.description,
    icons: [
      {
        size: '32x32',
        url: 'http://via.placeholder.com/32x32'
      }
    ]
  }
};

Cấu trúc folder

Bạn có thể tùy chỉnh tên của folder kết quả :

poi.config.js

module.exports = {
  dist: 'buildy' // defaults to 'dist'
};

Với filename , bạn có thể đặt cách đặt tên file . Ở đây bạn có thể sử dụng [name] , [hash] , [id] , [ext] của Webpack và tất cả các biến tên đặc biệt. Các giá trị mặc định là:

poi.config.js

module.exports = {
  filename: {
    js: '[name].[hash:8].js',
    css: 'style.css',
    images: 'assets/images/[name].[ext]',
    fonts: 'assets/fonts/[name].[ext]',
    chunk: '[id].chunk.js'
  }
};

Sử dụng staticFolder bạn có thể thay đổi tên folder được sử dụng để sao chép các file thô sang dist :

poi.config.js

module.exports = {
  staticFolder: 'assets'
};

Biến env

Trong thuộc tính env , ta có thể xác định các biến tùy chỉnh của bạn :

poi.config.js

module.exports = {
  env: {
    VERSION: '2.3'
  }
};

Chúng có sẵn trong mã:

const version = process.env.VERSION;

Và trong mẫu:

<meta name="version" content="<%= htmlWebpackPlugin.options.env.VERSION %>" />

Trình sửa lỗi tự động

Sử dụng trình sửa autoprefixer để sửa đổi cài đặt cho plugin trình sửa lỗi tự động PostCSS:

poi.config.js

module.exports = {
  autoprefixer: {
    browsers: ['ie > 9', 'last 4 versions']
  }
};

Sử dụng SCSS

Để sử dụng bộ xử lý trước, bạn chỉ cần cài đặt bộ tải và các phần phụ thuộc có thể.

Ví dụ: để nhập file .scss , ta cần cài đặt:

$ npm install node-sass sass-loader --save-dev

Cấu hình trong package.json

Poi cũng có thể được tùy chỉnh bằng cách sử dụng thuộc tính poi trong file package.json của dự án của bạn:

package.json

{
  "poi": {
    "dist": "buildy",
    "staticFolder": "assets"
  }
  ...
}

Kết thúc

Poi có thể dễ dàng tùy chỉnh đồng thời giúp bạn không bị chìm trong biển cấu hình. Ở đây tôi vừa chỉ ra những cái phổ biến nhất Vui lòng truy cập tài liệu để xem bạn có thể làm gì khác. Nhưng hãy nhớ, tốt hơn là bạn nên tuân theo các quy ước khi nào có thể.

Tags:

Các tin liên quan