شروع شدن

نصب و راه اندازی

این موضوع شامل یک فایل Webpack سفارشی است که می‌تواند برای کامپایل مجدد و کوچک کردن دارایی‌های موضوع در حین توسعه یا برای استقرار استفاده شود. Node.js before using Webpack.

پس از نصب Node.js، اجرا کنیدnpm install to install the rest of AppStack's dependencies. All dependencies will be downloaded to the node_modules directory.

npm install

اکنون شما آماده تغییر فایل های منبع و ایجاد فایل های جدید هستیدdist/ files. AppStack is using webpack and webpack-serve to automatically detect file changes and start a local webserver at http://localhost:8080.

npm start

ابزار بسازید

راه اندازی یک وب سرور محلی درhttp://localhost:8080 and detect file changes:

npm start

تشخیص خودکار تغییرات فایل بدون راه اندازی وب سرور محلی:

npm run watch

کامپایل، بهینه سازی، کوچک سازی و زشت کردن همه فایل های منبعdist/:

npm run build

ساختار فایل

در داخل فایل فشرده، دایرکتوری ها و فایل های زیر را خواهید یافت.

  • 📁 اسناد - HTML demo files
  • 📁 منطقه - Compiled files
    • 📁 css
    • 📁 js
    • 📁 ایمیج
    • 📁 فونت ها
  • 📁 src - Source files
    • 📁 scss
      • 📁 1-متغیرها - Sass variables
      • 📁 2-میکس - Sass mixins
      • 📁 3 جزئی - AppStack's components
      • 📁 4-ابزار - Utilities/helpers
      • 📁 5-فروشنده - 3rd party plugin styling
      • 📄 _app.scss
      • 📄 dark.scss
      • 📄 light.scss
    • 📁 js
      • 📁 ماژول ها
      • 📄 app.js
    • 📁 ایمیج
    • 📁 فونت ها
  • 📄 .babelrc - Babel configuration file
  • 📄 .eslintrc - ESLint configuration file
  • 📄 .gitignore - Specifies files to ignore
  • 📄 package.json - List of dependencies and available scripts
  • 📄 webpack.config.js - Webpack configuration file

قالب پایه

این الگوی اولیه می تواند به عنوان دستورالعملی برای نحوه ساختاربندی صفحات جدید هنگام استفاده از AppStack استفاده شود. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>AppStack</title>

  <link href="{PATH}/dist/css/light.css" rel="stylesheet">
</head>
<body data-theme="default" data-layout="fluid" data-sidebar-position="left" data-sidebar-behavior="sticky">
  <h1>Hello, world!</h1>

  <script src="{PATH}/dist/js/app.js"></script>
</body>
</html>

جی کوئری را رها کنید

اگر می خواهید jQuery و همه افزونه های مرتبط را از برنامه خود حذف کنید، لطفاً مراحل زیر را دنبال کنید:

  1. تمام ماژول های جی کوئری را از فایل ورودی جاوا اسکریپت حذف کنید:/src/js/app.js
  2. قطعه های زیر را از قسمت حذف کنید/webpack.config.js file
  3. اجرا کنnpm run build
new Webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
})
{
  test: require.resolve("jquery"),
  loader: "expose-loader",
  options: {
    exposes: ["$", "jQuery"],
  }
}