programming css

Rollup-plugin-css mảnh dẻ chỉ

Đứng lên. bài đăng này được viết vào năm 2016 và một số công cụ và giá có thể đã thay đổi. Mã vẫn hoạt động, nhưng bạn có thể muốn tìm hướng dẫn cập nhật hơn

Trong phần đầu tiên của loạt bài này, chúng tôi đã giới thiệu quá trình thiết lập Rollup làm công cụ xây dựng giao diện người dùng cho JavaScript

Bài viết này bao gồm các phần hai và ba

Trước tiên, chúng tôi sẽ tiếp tục làm việc với dự án đó để thêm hỗ trợ xử lý biểu định kiểu thông qua Rollup, sử dụng PostCSS để chạy một số biến đổi và cho phép chúng tôi sử dụng đường cú pháp như cú pháp biến đơn giản hơn và quy tắc lồng nhau

Sau đó, chúng tôi sẽ kết thúc với , nơi chúng tôi sẽ thêm xem tệp và tải lại trực tiếp vào dự án để chúng tôi không phải tạo lại gói theo cách thủ công bất cứ khi nào tệp được thay đổi

điều kiện tiên quyết

  • Chúng tôi sẽ tiếp tục với dự án mà chúng tôi đã bắt đầu vào tuần trước, vì vậy nếu bạn chưa xem qua phần đó, thì có lẽ nó đáng để xem qua

GHI CHÚ. Nếu bạn không có bản sao của dự án, bạn có thể sao chép dự án ở cuối Phần I bằng cách sử dụng lệnh này. 

npm install --save-dev rollup-plugin-postcss
8

Điều hướng sê-ri

  • phần tôi. Cách sử dụng Rollup để xử lý và đóng gói các tệp JavaScript
  • Phần II. Cách sử dụng Tổng số để xử lý và đóng gói biểu định kiểu ${result1}\n\n`; printTarget.innerText += `addArray[[1, 2, 3, 4]] => ${result2}`;

    Bước 1. Cài đặt PostCSS làm plugin Rollup

    Điều đầu tiên chúng ta cần là plugin Rollup's PostCSS, vì vậy hãy cài đặt plugin đó bằng cách sau

    npm install --save-dev rollup-plugin-postcss

    Bước 2. Cập nhật 
      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    5

    Tiếp theo, hãy thêm plugin vào 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    5 của chúng tôi

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };

    Hãy xem gói được tạo

    Bây giờ chúng tôi có thể xử lý biểu định kiểu, chúng tôi có thể tạo lại gói và xem tất cả điều này hoạt động như thế nào

    Chạy 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    7, sau đó xem gói được tạo tại 
      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    8, ngay gần trên cùng. Bạn sẽ thấy một chức năng mới có tên là 
      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    9

    function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];

    Tóm lại, hàm này tạo một phần tử 

    function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
    0, đặt biểu định kiểu làm nội dung của nó và nối phần đó vào phần tử 
    function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
    1 của tài liệu

    Ngay bên dưới phần khai báo hàm, chúng ta có thể thấy rằng nó được gọi với kiểu đầu ra bởi PostCSS. Khá hấp dẫn, phải không?

    Ngoại trừ hiện tại, những phong cách đó không thực sự được xử lý; . Vì vậy, hãy thêm các plugin PostCSS mà chúng tôi cần để làm cho biểu định kiểu của chúng tôi hoạt động trong các trình duyệt mục tiêu của chúng tôi

    Bước 3. Cài đặt các plugin PostCSS cần thiết

    Tôi yêu PostCSS. Tôi bắt đầu ở trại LESS, thấy mình ít nhiều bị ép buộc vào trại Sass khi mọi người từ bỏ LESS, và sau đó vô cùng hạnh phúc khi biết rằng PostCSS tồn tại

    Tôi thích nó vì nó cho phép tôi truy cập vào các phần của LESS và Sass mà tôi thích — lồng nhau, các biến đơn giản — và không giúp tôi tiếp cận các phần của LESS và Sass mà tôi cho là hấp dẫn và nguy hiểm, chẳng hạn như các toán tử logic

    Một trong những điều mà tôi thích nhất về nó là việc sử dụng các plugin, thay vì một cấu trúc ngôn ngữ tổng thể có tên là “PostCSS”. Chúng tôi chỉ có thể chọn các tính năng mà chúng tôi thực sự sẽ sử dụng — và quan trọng hơn, chúng tôi có thể loại bỏ các tính năng mà chúng tôi không muốn sử dụng

    Vì vậy, trong dự án của chúng tôi, chúng tôi sẽ chỉ sử dụng bốn phần bổ trợ - hai phần bổ trợ cho đường cú pháp, một phần bổ sung để hỗ trợ các tính năng CSS mới trong các trình duyệt cũ hơn và một phần bổ sung để nén và thu nhỏ biểu định kiểu kết quả

    • function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      2 — Điều này cho phép sử dụng các biến kiểu Sass [e. g. 
      function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      3, được sử dụng như 
      function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      4] thay vì cú pháp CSS dài dòng hơn [e. g. 
      function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      5, được sử dụng như 
      function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      6]. Đây hoàn toàn là ưu đãi; 
    • function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      7 — Điều này cho phép các quy tắc được lồng vào nhau. Tôi thực sự không sử dụng điều này để lồng các quy tắc; 
    • function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      8 — Đây là gói phần bổ trợ kích hoạt cú pháp CSS mới nhất [theo thông số kỹ thuật CSS mới nhất], phiên dịch cú pháp đó để hoạt động, ngay cả trong các trình duyệt cũ không hỗ trợ các tính năng mới
    • function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
      9 — Điều này nén và thu nhỏ đầu ra CSS. Đây là CSS, UglifyJS là gì đối với JavaScript

    Để cài đặt các plugin này, hãy sử dụng lệnh này

    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano

    Bước 4. Cập nhật 
      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    5

    Tiếp theo, hãy đưa các plugin PostCSS của chúng ta vào 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    5 bằng cách thêm thuộc tính 
    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    2 vào đối tượng cấu hình 
    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    3

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };

    GHI CHÚ. Chúng tôi chuyển 

    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    4 thành 
    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    5 vì cả nó và 
    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    6 đều sử dụng Autoprefixer, điều này sẽ kích hoạt cảnh báo. Thay vì vật lộn với cấu hình, chúng tôi sẽ chỉ biết rằng nó đang được chạy hai lần [trong trường hợp này là vô hại] và tắt cảnh báo

    Kiểm tra đầu ra trong 
    function __$styleInject[css] {
  css = css || '';
  var head = document.head || document.getElementsByTagName['head'][0];
  var style = document.createElement['style'];
  style.type = 'text/css';
  if [style.styleSheet] {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild[document.createTextNode[css]];
  }
  head.appendChild[style];
}
__$styleInject['/* Styles omitted for brevity.. */'];
    1

    Với các plugin được cài đặt, chúng tôi có thể xây dựng lại gói của mình [_______2_______7] và mở 

    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    9 trong trình duyệt của mình. Chúng tôi sẽ thấy rằng trang hiện đã được tạo kiểu và nếu kiểm tra tài liệu, chúng tôi có thể thấy biểu định kiểu đã được đưa vào phần đầu, được nén và thu nhỏ cùng với tất cả các tiền tố của nhà cung cấp và các tính năng khác mà chúng tôi mong đợi từ PostCSS

    Biểu định kiểu được xử lý bởi PostCSS và được bổ sung bởi Rollup

    Tuyệt vời. Vì vậy, bây giờ chúng tôi có một quá trình xây dựng khá vững chắc. JavaScript của chúng tôi được đóng gói, mã không sử dụng bị xóa và đầu ra được nén và thu nhỏ, đồng thời các biểu định kiểu của chúng tôi được PostCSS xử lý và đưa vào đầu

    Tuy nhiên, vẫn hơi khó chịu khi phải xây dựng lại gói theo cách thủ công mỗi khi chúng tôi thực hiện thay đổi. Vì vậy, trong phần tiếp theo, chúng tôi sẽ Rollup xem các tệp của chúng tôi để biết các thay đổi và tải lại trình duyệt bất cứ khi nào một tệp được thay đổi

    Phần III. Cách sử dụng tổng số. js cho dự án tiếp theo của bạn. Tải lại trực tiếp

    Tại thời điểm này, dự án của chúng tôi đã kết hợp thành công JavaScript và biểu định kiểu, nhưng đây vẫn là một quy trình thủ công. Và vì mọi bước thủ công trong một quy trình đều có rủi ro thất bại cao hơn so với bước tự động — và vì thật khó chịu khi phải chạy ____2_______7 mỗi khi chúng tôi thay đổi tệp — nên chúng tôi muốn thực hiện việc xây dựng lại gói tự động

    GHI CHÚ. Nếu bạn không có bản sao của dự án, bạn có thể sao chép dự án ở cuối Phần II bằng cách sử dụng lệnh này. 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    1

    Bước 0. Thêm plugin đồng hồ vào Rollup

    Một công cụ phát triển phổ biến khi làm việc với Node. js là một người theo dõi. Điều này có thể quen thuộc nếu bạn đã từng làm việc với webpack, Grunt, Gulp và các công cụ xây dựng khác trong quá khứ

    Trình theo dõi là một quy trình chạy trong khi bạn làm việc trên một dự án và khi bạn thay đổi tệp trong bất kỳ thư mục nào mà nó đang theo dõi, nó sẽ kích hoạt một hành động. Trong trường hợp các công cụ xây dựng, hành động phổ biến nhất là kích hoạt quá trình xây dựng lại

    Trong dự án của chúng tôi, chúng tôi muốn xem thư mục 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    2 để biết bất kỳ thay đổi tệp nào và khi các thay đổi được phát hiện, chúng tôi muốn kích hoạt tạo gói mới từ Rollup

    Để làm điều đó, chúng tôi sẽ sử dụng plugin 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    3, hơi khác một chút so với các plugin Rollup khác mà chúng tôi đã sử dụng cho đến nay — nhưng nhiều hơn về điều đó một chút. Hãy bắt đầu bằng cách cài đặt plugin

    npm install --save-dev rollup-watch

    Bước 1. Chạy Tổng số với cờ 
      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    4

    Sự khác biệt giữa 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    3 và các plugin Tổng số khác là chúng tôi không phải thực hiện bất kỳ thay đổi nào đối với 
      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
+ import postcss from 'rollup-plugin-postcss';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
+     postcss[{
+       extensions: [ '.css' ],
+     }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    5 để sử dụng nó

    Thay vào đó, chúng tôi thêm một cờ vào lệnh đầu cuối của mình

    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch

    Sau khi chạy lệnh, chúng ta thấy một đầu ra khác trong bảng điều khiển

    $ ./node_modules/.bin/rollup -c --watch
checking rollup-watch version...
bundling...
bundled in 949ms. Watching for changes...

    Quá trình vẫn hoạt động và hiện đang theo dõi các thay đổi

    Vì vậy, nếu chúng tôi thực hiện một thay đổi nhỏ đối với 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    7 — chẳng hạn như thêm nhận xét — ngay sau khi chúng tôi lưu nó, một gói mới sẽ được tạo

    Khi trình theo dõi đang chạy, các thay đổi sẽ kích hoạt quá trình xây dựng lại. Kẻ nói dối bắt lỗi ngay lập tức. Gọn gàng nhỉ?

    Đây là một bước tiết kiệm thời gian lớn trong quá trình phát triển, nhưng chúng ta có thể tiến thêm một bước nữa. Ngay bây giờ, chúng tôi vẫn phải làm mới trình duyệt để xem gói được cập nhật — vì vậy, hãy thêm một công cụ để tự động làm mới trình duyệt khi gói của chúng tôi được cập nhật

    TIỀN BOA. Để dừng quá trình xem, nhấn 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    8 trong cửa sổ terminal

    Bước 2. Cài LiveReload để refresh trình duyệt tự động

    Một công cụ phổ biến để tăng tốc độ phát triển là LiveReload. Đây là một quá trình chạy trong nền và yêu cầu trình duyệt làm mới bất cứ khi nào một tệp mà nó đang xem bị thay đổi

    Để bắt đầu, chúng ta cần cài đặt plugin

    npm install --save-dev livereload

    Bước 3. Chèn tập lệnh LiveReload vào dự án

    Trước khi LiveReload có thể hoạt động, chúng tôi cần đưa vào trang của mình một tập lệnh nói chuyện với máy chủ LiveReload

    Vì điều này chỉ bắt buộc trong quá trình phát triển, nên chúng tôi sẽ tận dụng lợi thế của các biến môi trường để chỉ chèn tập lệnh nếu chúng tôi không ở chế độ 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    9

    Trong 

      // Rollup plugins
  import babel from 'rollup-plugin-babel';
  import eslint from 'rollup-plugin-eslint';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import replace from 'rollup-plugin-replace';
  import uglify from 'rollup-plugin-uglify';
  import postcss from 'rollup-plugin-postcss';

+ // PostCSS plugins
+ import simplevars from 'postcss-simple-vars';
+ import nested from 'postcss-nested';
+ import cssnext from 'postcss-cssnext';
+ import cssnano from 'cssnano';

  export default {
    entry: 'src/scripts/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
      postcss[{
+       plugins: [
+         simplevars[],
+         nested[],
+         cssnext[{ warnForDuplicates: false, }],
+         cssnano[],
+       ],
        extensions: [ '.css' ],
      }],
      resolve[{
        jsnext: true,
        main: true,
        browser: true,
      }],
      commonjs[],
      eslint[{
        exclude: [
          'src/styles/**',
        ]
      }],
      babel[{
        exclude: 'node_modules/**',
      }],
      replace[{
        ENV: JSON.stringify[process.env.NODE_ENV || 'development'],
      }],
      [process.env.NODE_ENV === 'production' && uglify[]],
    ],
  };
    7, hãy thêm phần sau

    npm install --save-dev rollup-plugin-postcss
    0

    Lưu tệp sau khi bạn đã thực hiện các thay đổi và bây giờ chúng tôi đã sẵn sàng dùng thử

    GHI CHÚ. Việc hiểu cách thức hoạt động của máy chủ LiveReload không quan trọng, nhưng phiên bản ngắn gọn là quy trình dòng lệnh theo dõi các thay đổi của tệp, sau đó gửi một thông báo bằng cách sử dụng websockets tới tập lệnh phía máy khách, tập lệnh này sẽ kích hoạt tải lại

    Bước 4. Chạy LiveReload

    Với LiveReload được cài đặt và tập lệnh được đưa vào tài liệu của chúng tôi, chúng tôi có thể kích hoạt nó để xem thư mục 

    npm install --save-dev rollup-watch
    1 của chúng tôi

    npm install --save-dev rollup-plugin-postcss
    1

    GHI CHÚ. Lý do chúng tôi đang xem 

    npm install --save-dev rollup-watch
    1 là chúng tôi chỉ cần xây dựng lại khi có gói mới

    Điều này dẫn đến đầu ra tương tự như sau

    npm install --save-dev rollup-plugin-postcss
    2

    Và nếu chúng tôi mở trình duyệt của mình để xem 

    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    9 — hãy đảm bảo làm mới trang sau khi bắt đầu LiveReload để đảm bảo kết nối ổ cắm đang hoạt động — chúng tôi có thể thấy rằng việc thực hiện thay đổi thành 
    npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano
    9 sẽ tự động tải lại trình duyệt và hiển thị cho chúng tôi các thay đổi của chúng tôi

    Thay đổi tệp kích hoạt tải lại trình duyệt

    Điều này thật tuyệt, nhưng chúng tôi vẫn còn một chút khó khăn. ngay bây giờ, chúng tôi chỉ có thể chạy chức năng xem của Rollup hoặc LiveReload trừ khi chúng tôi mở nhiều phiên cuối. Đó không phải là lý tưởng. Trong hai bước tiếp theo, chúng tôi sẽ tạo một giải pháp thay thế cho vấn đề đó

    Bước 5. Sử dụng tập lệnh 
    npm install --save-dev rollup-watch
    5 để đơn giản hóa quá trình khởi động

    Cho đến giờ trong phần hướng dẫn này, chúng ta đã phải nhập đường dẫn đầy đủ đến tập lệnh 

    npm install --save-dev rollup-watch
    6, mà - tôi chắc rằng bây giờ bạn đã nhận thấy - là một điều khó hiểu

    Vì điều này và vì công cụ chúng tôi sẽ sử dụng để chạy đồng hồ và LiveReload cùng lúc, nên chúng tôi sẽ thêm cả lệnh 

    npm install --save-dev rollup-watch
    6 và lệnh 
    npm install --save-dev rollup-watch
    8 làm tập lệnh trong 
    npm install --save-dev rollup-watch
    5

    Mở 

    npm install --save-dev rollup-watch
    5 — nó nằm trong thư mục gốc của thư mục dự án 
    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    1. Bên trong, bạn sẽ thấy như sau

    npm install --save-dev rollup-plugin-postcss
    3

    Thấy tài sản 

    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    2 đó không?

    1. Tập lệnh để chạy lệnh tạo gói tổng số của chúng tôi
    2. Tập lệnh để bật LiveReload

    Thêm phần sau vào 

    npm install --save-dev rollup-watch
    5

    npm install --save-dev rollup-plugin-postcss
    4

    Các tập lệnh này cho phép chúng tôi sử dụng phím tắt để thực thi tập lệnh mà chúng tôi chọn

    Để chạy Rollup, bây giờ chúng ta có thể sử dụng 

    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    4

    Để chạy LiveReload, chúng ta có thể sử dụng 

    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    5

    Tất cả những gì còn lại bây giờ là để cả hai chạy cùng nhau

    Bước 6. Cài đặt một công cụ để chạy song song trình theo dõi và LiveReload

    Để cả Rollup và LiveReload hoạt động cùng lúc, chúng ta sẽ sử dụng một tiện ích có tên là 

    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    6

    Đây là một công cụ mạnh mẽ, vì vậy chúng tôi sẽ không nói về mọi thứ mà nó có thể làm. Mục đích chúng tôi đang sử dụng là khả năng chạy song song các tập lệnh — nghĩa là cả hai tập lệnh đều chạy cùng lúc trong cùng một phiên cuối

    Bắt đầu bằng cách cài đặt 

    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    6

    npm install --save-dev rollup-plugin-postcss
    5

    Tiếp theo, chúng ta cần thêm một tập lệnh nữa vào 

    npm install --save-dev rollup-watch
    5 gọi 
    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    6. Trong khối 
    # Run Rollup with the watch plugin enabled
./node_modules/.bin/rollup -c --watch
    2, hãy thêm phần sau [lưu ý rằng tôi đã bỏ qua phần lớn tệp cho ngắn gọn]

    npm install --save-dev rollup-plugin-postcss
    6

    Lưu các thay đổi của bạn, sau đó chuyển đến thiết bị đầu cuối. Chúng tôi đã sẵn sàng cho bước cuối cùng

    Bước 7. Chạy tập lệnh 
    $ ./node_modules/.bin/rollup -c --watch
checking rollup-watch version...
bundling...
bundled in 949ms. Watching for changes...
    1 cuối cùng

    Đó là nó. Chúng ta làm được rồi

    Trong thiết bị đầu cuối của bạn, hãy chạy như sau

    npm install --save-dev rollup-plugin-postcss
    7

    Sau đó tải lại trình duyệt của bạn, thực hiện thay đổi trong CSS hoặc JS và xem trình duyệt làm mới với gói cập nhật — tất cả đều giống như phép thuật

    LiveReload + rebundling tự động giống như ma thuật

    Bây giờ chúng tôi là bậc thầy Rollup. Các gói mã của chúng tôi sẽ nhỏ hơn và nhanh hơn, đồng thời quy trình phát triển của chúng tôi sẽ nhanh chóng và dễ dàng

    Đọc thêm

    • đăngCSS
    • Một số thảo luận về việc sử dụng JS để chèn kiểu và khi nào/liệu nó có phù hợp không

    chú thích

    1. Tôi nói "nguy hiểm" bởi vì các tính năng logic của LESS/Sass luôn khiến tôi cảm thấy hơi mỏng manh và trong các cuộc thảo luận với mọi người, chúng luôn là điểm khó khăn. Đó là một lá cờ đỏ. việc sử dụng chúng đã tạo ra một loại độ giòn trong biểu định kiểu và trong khi một người có thể hoàn toàn hiểu rõ về những gì đang diễn ra, thì những người còn lại trong nhóm có thể cảm thấy như mixin là ma thuật thần tiên - và điều đó không bao giờ tốt cho khả năng bảo trì.

      Rollup không được dùng nữa?

      Gói này không được dùng nữa .

      Svelte có sử dụng cuộn lên không?

      Do đó, không ngạc nhiên khi Svelte hỗ trợ Rollup thông qua gói tích hợp tùy chỉnh . Để sử dụng Rollup, trước tiên chúng tôi cần cài đặt các gói sau dưới dạng phụ thuộc phát triển. @rollup/plugin-commonjs. @rollup/plugin-nút-giải quyết.

      Làm cách nào để gói CSS với rollup?

      Hãy sử dụng Rollup. .
      Bước 0. Tải biểu định kiểu trong chính. js. .
      Bước 1. Cài đặt PostCSS làm plugin Rollup. .
      Bước 2. Cập nhật tổng số. .
      Bước 3. Cài đặt các plugin PostCSS cần thiết. .
      Bước 4. Cập nhật tổng số

      Plugin tổng số là gì?

      Rollup là một gói mô-đun dành cho JavaScript để biên dịch các đoạn mã nhỏ thành thứ gì đó lớn hơn và phức tạp hơn, chẳng hạn như thư viện hoặc ứng dụng . Nó sử dụng định dạng chuẩn hóa mới cho các mô-đun mã có trong bản sửa đổi ES6 của JavaScript, thay vì các giải pháp mang phong cách riêng trước đây như CommonJS và AMD.

Bài Viết Liên Quan

Đảo ngược danh sách chuỗi trong python
Làm cách nào để thay đổi tên tệp trong HTML?
Làm cách nào để lấy giá trị mảng trong JavaScript?
Ram điện thoại bao nhiêu là mạnh
Tôi có thể học javascript nhanh không?
Các gói Python được cài đặt Windows 10 ở đâu
Làm cách nào để cắt \n cuối cùng trong PHP?
MongoDB thích hợp để lưu trữ các giao dịch ngân hàng
Cách sử dụng Power Query trong Excel 2023
Tôi có thể tìm danh mục trong WordPress ở đâu?
Cách tạo biểu mẫu trong python bằng pycharm
Hằng số được xác định trước php
1 euro nhật bằng bao nhiêu tiền việt
Ngày phát hành php 7
Đầu trang và chân trang trong Excel 2022
Triển khai Laravel 8 lên shared hosting
Truy vấn tham gia MongoDB
Có một chức năng duy nhất trong python?
Làm cách nào để tạo một trường duy nhất trong mongodb?
2023 Nhật ký lập kế hoạch kmart

Toplist mới

#1
Top 9 review kem chống nắng cho bà bầu 2023
6 tháng trước
#2
Top 5 tiếng anh lớp 2 unit 7 trang 46 2023
6 tháng trước
#3
Top 10 tải: mẫu the nhân viên trên excel 2023
6 tháng trước
#4
Top 7 tuyển dụng nhân viên chốt đơn tại nhà 2023
6 tháng trước
#5
Top 7 mẫu nhà 2 tầng chữ l 100m2 mái bằng 2023
6 tháng trước
#6
Top 4 truyện ngắn về quê hương lớp 2 2023
6 tháng trước
#7
Top 6 sơ đồ bộ máy nhà nước thời hồ 2023
6 tháng trước
#8
Top 8 trước việc nhật đảo chính pháp, đảng ta có chủ trương gì mới 2023
6 tháng trước
#9
Top 7 dân số đông đã đem đến cho nước ta 2023
6 tháng trước

Bài mới nhất

Trường trung cấp nghề 19 thái bình năm 2024
Làm thế nào để lưu ứng dụng vào thẻ nhớ năm 2024
Máy bán card điện thoại truemoney bị lỗi năm 2024
Cơ chế giao vốn cho doanh nghiệp là gì năm 2024
Bài tập unit 9 lớp 6 mới nhất năm 2024
Máy hít bâm của máy năng lương là gì năm 2024
Quản lý kinh doanh là làm gì năm 2024
Sườn xào chua ngọt tiếng anh là gì năm 2024
Ngành disaster resilience and sustainable development là ngành gì năm 2024
Chiến tranh cục bộ dưới thời tổng thống nào năm 2024

Chủ Đề

Toplist programming Địa Điểm Hay Hỏi Đáp Là gì Mẹo Hay Nghĩa của từ Học Tốt Công Nghệ Khỏe Đẹp bao nhiêu mẹo hay Top List Bao nhiêu Sản phẩm tốt Bài Tập Xây Đựng Ngôn ngữ đánh giá Tiếng anh Bài tập So Sánh Ở đâu So sánh Hướng dẫn Dịch bao nhieu Tại sao Đại học hướng dẫn Máy tính Thế nào Vì sao Bao lâu Khoa Học Hà Nội