Bí danh đường dẫn để nhập trong WebStorm

Tôi sử dụng bí danh đường dẫn webpack để tải mô-đun ES6.

Ví dụ: Nếu tôi xác định một bí danh utilsthay vì một cái gì đó như
import Foo from "../../../utils/foo", tôi có thể làm
import Foo from "utils/foo"

Vấn đề là khi tôi bắt đầu sử dụng bí danh, WebStorm sẽ mất theo dõi quá trình nhập và tôi bị bỏ lại với các cảnh báo và không có tự động hoàn thành.

Có cách nào để hướng dẫn WebStorm sử dụng các bí danh như vậy không?

Có, có.

Trên thực tế, Webstorm không thể tự động phân tích cú pháp và áp dụng cấu hình Webpack, nhưng bạn có thể thiết lập bí danh theo cách tương tự.

Bạn chỉ cần đánh dấu thư mục mẹ của "utils" (trong ví dụ của bạn) là thư mục gốc (nhấp chuột phải, đánh dấu thư mục là / resource root).

Chúng tôi vừa quản lý để thực hiện với cấu trúc sau:

/src
    /A
    /B
    /C

Chúng ta có các thư mục AB và C được khai báo là bí danh trong Webpack. Và trong Webstorm, chúng tôi đã đánh dấu "src" là "Nguồn gốc".

Và bây giờ chúng ta có thể nhập:

import A/path/to/any/file.js

thay vì

import ../../../../../A/path/to/any/file.js

trong khi vẫn có Webstorm phân tích cú pháp chính xác và lập chỉ mục tất cả mã, liên kết đến tệp, tự động hoàn thành, v.v.

Tôi đã quản lý để thiết lập bí danh cho WebStorm 2017.2 trong webpack như sau:

Đối với bản ghi: trong PHPSTORM , làm việc với laravel mix , tôi đã giải quyết được điều này bằng cách tạo một tệp webpack.config.js riêng biệt như:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

Và sau đó nhập nó vào webpack.mix.js như:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Đảm bảo rằng tệp cấu hình webpack được trỏ chính xác trong cấu hình của PhpStorm trong: Cài đặt> Ngôn ngữ & Khung công tác> Javascript> Webpack

Bạn có thể xác định các đường dẫn tùy chỉnh, vì vậy WebStorm / PhpStorm có thể hiểu bí danh của bạn. Nhưng hãy đảm bảo rằng chúng giống hệt với bí danh của bạn. Tạo tệp trong thư mục gốc của bạn và gọi nó như sau: webStorm.config.js(bất kỳ jstệp nào cũng được). Sau đó, định cấu hình các đường dẫn của bạn bên trong:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm / PhpStorm sẽ nhận dạng Systemlà mô-đun riêng của nó và sẽ coi tệp này là cấu hình.

Điều này được trả lời trong một bình luận nhưng để tiết kiệm mọi người đào sâu vào bình luận và chỉ liên kết thông tin, đây là:

Kể từ WS2017.2, điều này sẽ được thực hiện tự động . Thông tin ở đây .

Theo đó, webstorm sẽ tự động giải quyết các bí danh được bao gồm trong thư webpack.configmục gốc của dự án. Nếu bạn có cấu trúc tùy chỉnh và cấu trúc của bạn webpack.configkhông có trong thư mục gốc, hãy truy cập Settings | Languages & Frameworks | JavaScript | Webpackvà đặt tùy chọn thành cấu hình bạn yêu cầu.

Lưu ý: Hầu hết các thiết lập đều có basecấu hình sau đó gọi một devhoặc prodphiên bản. Để điều này hoạt động bình thường, bạn cần yêu cầu webstorm sử dụng dev .

Không phải lúc này , Chúng tôi cũng đang sử dụng bí danh đường dẫn cho các tệp trong dự án phản ứng của chúng tôi. Tên nhập ngắn hơn nhưng chúng tôi đã mất nhiều công sức kiểm tra tĩnh webstorm cũng như các tính năng hoàn thành.

Sau đó, chúng tôi đã đưa ra quyết định giảm mã xuống chỉ còn 3 cấp độ sâu, cũng như một cấp độ duy nhất cho các phần chung. Tính năng hoàn thành đường dẫn của webstom (ctrl + space)thậm chí còn giúp giảm chi phí nhập liệu. Phiên bản sản xuất không sử dụng tên dài hơn, vì vậy hầu như không tạo ra bất kỳ sự khác biệt nào trong mã cuối cùng.

Tôi sẽ đề nghị hãy xem xét lại quyết định của bạn về bí danh. Bạn mất ý nghĩa ngữ nghĩa của các mô-đun đến từ node_modules và mã của riêng bạn, cũng như tham chiếu các tệp bí danh lặp đi lặp lại để hiểu về mã của bạn, là một chi phí lớn hơn nhiều.

Trong PHPStorm (hiện đang sử dụng 2017.2), tôi không thể có được cấu hình webpack hoạt động bình thường liên quan đến bí danh.

Cách khắc phục của tôi liên quan đến việc sử dụng phần "Thư mục" của cài đặt chính. Tôi chỉ cần đánh dấu từng thư mục được tham chiếu bởi bí danh là thư mục gốc, sau đó nhấp vào menu thả xuống thuộc tính cho từng thư mục và chỉ định bí danh đó là "Tiền tố gói". Điều này làm cho mọi thứ liên kết với tôi.

Không chắc liệu phần Thư mục có tồn tại trong WebStorm hay không, nhưng nếu có thì đây có vẻ là một phương pháp chống lừa để làm cho bí danh nhập hoạt động.

Đối với bất kỳ ai đang gặp khó khăn: path.resolve () phải được gọi với đối số đầu tiên "__dirname" cho Idea (Websorm) để có thể phân giải đường dẫn một cách chính xác.

Sẽ làm việc cho Idea (Websorm):

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

Sẽ không hoạt động cho Idea (Websorm) (trong khi vẫn là bí danh webpack hợp lệ):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}

Webstorm không thể đọc webpack.config nếu module.exportstrả về một hàm. Ví dụ

module.exports = function (webpackEnv) {
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    ...
 }
}

Kiểm tra tệp cấu hình của bạn, có thể nguyên nhân này khiến bạn gặp sự cố.

thêm jsconfig.jsvào gốc dự án của bạn

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}