ฉันยังสับสนกับวิธีการแก้ไขเส้นทางโมดูลด้วย webpack ตอนนี้ฉันเขียน:

myfile = require('../../mydir/myfile.js') 

แต่ฉันต้องการเขียน

myfile = require('mydir/myfile.js') 

ฉันคิดว่าresolve.aliasอาจช่วยตั้งแต่ผมเห็นตัวอย่างที่คล้ายกันโดยใช้เป็นชื่อแทนแล้วฉันสามารถ{ xyz: "/some/dir" }require("xyz/file.js")

แต่ถ้าผมตั้งนามแฝงของฉันไป{ mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') จะไม่ทำงาน

ฉันรู้สึกโง่เพราะฉันอ่านเอกสารหลายครั้งและฉันรู้สึกว่าขาดอะไรบางอย่างไป อะไรคือวิธีที่ถูกต้องในการหลีกเลี่ยงการเขียนความสัมพันธ์ทั้งหมดที่มีกับ../../etc?

Webpack> 2.0

ดูคำตอบของ wtk

Webpack 1.0

วิธีที่ง่ายกว่าในการทำเช่นนี้คือใช้ resol.root

http://webpack.github.io/docs/configuration.html#resolve-root

resolve.root

ไดเรกทอรี (พา ธ สัมบูรณ์) ที่มีโมดูลของคุณ อาจเป็นอาร์เรย์ของไดเรกทอรี ควรใช้การตั้งค่านี้เพื่อเพิ่มแต่ละไดเรกทอรีไปยังเส้นทางการค้นหา

ในกรณีของคุณ:

กำหนดค่า webpack

var path = require('path');

// ...

  resolve: {
    root: path.resolve('./mydir'),
    extensions: ['', '.js']
  }

โมดูลการบริโภค

require('myfile')

หรือ

require('myfile.js')

ดูเพิ่มเติมที่: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

สำหรับการอ้างอิงในอนาคต webpack 2 จะลบทุกอย่าง แต่modulesเป็นวิธีการแก้ไขเส้นทาง วิธีนี้rootจะไม่ทำงาน

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

ตัวอย่างการกำหนดค่าเริ่มต้นด้วย:

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)

resolve.alias ควรทำงานอย่างที่คุณอธิบายไว้ดังนั้นฉันจึงให้คำตอบนี้เพื่อช่วยลดความสับสนที่อาจเกิดขึ้นจากคำแนะนำในคำถามเดิมที่ไม่ได้ผล

การกำหนดค่าการแก้ไขเช่นเดียวกับด้านล่างจะให้ผลลัพธ์ที่คุณต้องการ:

// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
    },
    extensions: [ '', '.js' ]
  }
}

require( 'mydir/myfile.js' )จะทำงานตามที่คาดไว้ หากไม่เป็นเช่นนั้นจะต้องมีปัญหาอื่น ๆ

หากคุณมีหลายโมดูลที่คุณต้องการเพิ่มไปยังเส้นทางการค้นหาresolve.rootเหมาะสม แต่ถ้าคุณแค่ต้องการอ้างอิงองค์ประกอบภายในโค้ดแอปพลิเคชันของคุณโดยไม่มีพา ธ สัมพัทธ์aliasดูเหมือนจะตรงไปตรงมาที่สุด

ข้อได้เปรียบที่สำคัญaliasคือมันให้โอกาสคุณในการกำหนด namespace ของคุณrequireซึ่งสามารถเพิ่มความชัดเจนให้กับโค้ดของคุณ เช่นเดียวกับที่มันเป็นเรื่องง่ายที่จะเห็นจากคนอื่น ๆrequireคือสิ่งที่โมดูลจะถูกอ้างอิงaliasช่วยให้คุณเขียนพรรณนาrequires require( 'my-project/component' )ที่ทำให้มันเห็นได้ชัดว่าคุณกำลังกำหนดโมดูลภายในเช่น resolve.rootเพียงแค่คุณลงในไดเรกทอรีที่ต้องการโดยไม่ให้คุณมีโอกาสที่จะ namespace มันต่อไป

ในกรณีที่คนอื่นประสบปัญหานี้ฉันสามารถทำให้มันทำงานเช่นนี้:

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

โครงสร้างไดเรกทอรีของฉันอยู่ที่ใด:

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

จากนั้นในsrcไดเรกทอรีที่ฉันสามารถโทรได้:

import MyComponent from 'components/MyComponent';

ปวดหัวที่ใหญ่ที่สุดของฉันทำงานโดยไม่มีเส้นทาง namespaced บางสิ่งเช่นนี้

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

ก่อนที่ฉันจะตั้งสภาพแวดล้อมให้ทำสิ่งนี้:

require('app.js')
require('ui/menu')
require('lodash')

ฉันพบว่าสะดวกกว่าการหลีกเลี่ยงsrcเส้นทางโดยนัยซึ่งซ่อนข้อมูลบริบทที่สำคัญ

เป้าหมายของฉันคือต้องการสิ่งนี้:

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

อย่างที่คุณเห็นรหัสแอพทั้งหมดของฉันอาศัยอยู่ในเนมสเปซพา ธ ที่บังคับ ทำให้ค่อนข้างชัดเจนซึ่งต้องการการโทรต้องใช้ห้องสมุดรหัสแอพหรือไฟล์ทดสอบ

สำหรับสิ่งนี้ฉันต้องแน่ใจว่าเส้นทางการแก้ไขของฉันเป็นเพียงnode_modulesและโฟลเดอร์แอปปัจจุบันเว้นแต่คุณจะกำหนดชื่อแอปของคุณภายในโฟลเดอร์ซอร์สเช่นsrc/my_app

นี่คือการเริ่มต้นของฉันกับ webpack

resolve: {
  extensions: ['', '.jsx', '.js', '.json'],
  root: path.resolve(__dirname),
  modulesDirectories: ['node_modules']
}

มันจะดียิ่งขึ้นถ้าคุณตั้งค่า var สภาพแวดล้อมNODE_PATHเป็นไฟล์โครงการปัจจุบันของคุณ นี่เป็นวิธีที่เป็นสากลมากขึ้นและมันจะช่วยถ้าคุณต้องการใช้เครื่องมืออื่น ๆ โดยไม่ต้อง webpack: ทดสอบ linting ...

ฉันได้แก้ไขมันด้วย Webpack 2 เช่นนี้:

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

คุณสามารถเพิ่มไดเรกทอรีอื่น ๆ ลงในอาร์เรย์ ...

รับสิ่งนี้ได้รับการแก้ไขโดยใช้ Webpack 2:

   resolve: {
      extensions: ['', '.js'],
        modules: [__dirname , 'node_modules']
    }

หากคุณใช้แอป create-react-appคุณสามารถเพิ่ม.envไฟล์ที่มี

NODE_PATH=src/

ที่มา: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

กระทู้นี้เก่า แต่เนื่องจากไม่มีใครโพสต์เกี่ยวกับ require.context ฉันจะพูดถึงมัน:

คุณสามารถใช้ require.context เพื่อตั้งค่าโฟลเดอร์ให้ดูดังนี้:

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

ฉันไม่เข้าใจว่าทำไมไม่มีใครแนะนำให้รวมไดเรกทอรีหลักของ myDir ไว้ใน modulesDirectories ใน webpack ซึ่งควรทำให้ง่ายขึ้น:

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },

เพียงใช้babel-plugin-module-resolver :

$ npm i babel-plugin-module-resolver --save-dev

จากนั้นสร้าง.babelrcไฟล์ภายใต้รูทหากคุณยังไม่มีไฟล์:

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

และทุกสิ่งภายใต้รูทจะได้รับการปฏิบัติเหมือนการนำเข้าอย่างสมบูรณ์:

import { Layout } from 'components'

สำหรับการสนับสนุน VSCode / Eslint ดูที่นี่